/**
 * Carzy Announcement Bar - first visit popup
 * minutes.agency
 */

/* Repeated here so the popup keeps the site font even when the bar itself is
   switched off and its stylesheet never loads. */
@font-face {
	font-family: "Carzy DM Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/dm-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.carzy-pop {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(3, 7, 18, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	font-family: "Carzy DM Sans", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.carzy-pop[hidden] {
	display: none;
}

body.carzy-pop-open {
	overflow: hidden;
}

.carzy-pop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.carzy-pop *,
.carzy-pop *::before,
.carzy-pop *::after {
	box-sizing: border-box;
}

.carzy-pop__card {
	position: relative;
	width: 100%;
	max-width: 440px;
	max-height: calc(100vh - 48px);
	overflow: hidden auto;
	color: #ffffff;
	background: var(--carzy-pop-bg, #050b20);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.carzy-pop.is-open .carzy-pop__card {
	transform: translateY(0) scale(1);
}

.carzy-pop__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 17px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.75);
	background: rgba(9, 16, 38, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.carzy-pop__close:hover,
.carzy-pop__close:focus-visible {
	color: #ffffff;
	background: rgba(9, 16, 38, 0.9);
	border-color: rgba(255, 255, 255, 0.3);
}

/* A photo band across the lid of the card. object-fit keeps the band the same
   height whatever picture gets dropped in, so swapping it never breaks the
   layout, and the scrim under it stops the text meeting a hard edge. */
.carzy-pop__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #0a1226;
}

.carzy-pop__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
}

.carzy-pop__media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 42%;
	background: linear-gradient(
		to bottom,
		rgba(5, 11, 32, 0) 0%,
		color-mix(in srgb, var(--carzy-pop-bg, #050b20) 72%, transparent) 55%,
		var(--carzy-pop-bg, #050b20) 100%
	);
	pointer-events: none;
}

.carzy-pop__body {
	position: relative;
	padding: 26px 30px 28px;
	text-align: left;
}

.carzy-pop__media + .carzy-pop__body {
	padding-top: 22px;
}

/* Sentence case at normal spacing. No pill, no badge, no dot, and none of the
   caps plus letterspacing costume that every generated popup wears. Colour and
   position carry the hierarchy on their own. */
.carzy-pop__eyebrow {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--carzy-pop-accent, #cca001);
}

.carzy-pop__title {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.carzy-pop__text {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.68);
}

/* One line, real content: the campaign, the date it ends, and how long is
   left. Not a row of boxed digits with labels under them. */
.carzy-pop__deadline {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

.carzy-pop__left {
	color: var(--carzy-pop-accent, #cca001);
	font-weight: 700;
	white-space: nowrap;
}

/* Sentence case and a 16px radius, the same shape the theme's own .btn-theme
   uses. Navy on gold rather than the theme's white on gold: white on #CCA001
   only reaches 2.3:1, navy reaches 8.6:1 and is readable. */
.carzy-pop__button {
	display: block;
	width: 100%;
	padding: 15px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	color: var(--carzy-pop-bg, #050b20);
	background: var(--carzy-pop-accent, #cca001);
	border: 0;
	border-radius: 16px;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.carzy-pop__button:hover,
.carzy-pop__button:focus-visible {
	color: var(--carzy-pop-bg, #050b20);
	text-decoration: none;
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.carzy-pop__dismiss {
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 4px;
	text-align: center;
	font-family: inherit;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.2s ease;
}

.carzy-pop__dismiss:hover,
.carzy-pop__dismiss:focus-visible {
	color: rgba(255, 255, 255, 0.85);
}

.carzy-pop__close:focus-visible,
.carzy-pop__button:focus-visible,
.carzy-pop__dismiss:focus-visible {
	outline: 2px solid var(--carzy-pop-accent, #cca001);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.carzy-pop {
		padding: 16px;
	}

	.carzy-pop__body,
	.carzy-pop__media + .carzy-pop__body {
		padding: 20px 22px 24px;
	}

	.carzy-pop__title {
		font-size: 24px;
	}

	.carzy-pop__text {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.carzy-pop,
	.carzy-pop__card,
	.carzy-pop__button {
		transition: none;
	}

	.carzy-pop__card {
		transform: none;
	}
}