/* Welcome popup (inc/welcome-popup.php). The offer image in a centred card, a Shop Now button and a 10-second blue countdown bar. */
.kp-welcome {
	--kpw-gold: #e0a526;
	--kpw-gold-2: #ffd36b;
	--kpw-ink: #3a2408;
	--kpw-blue: #1299e8;       /* countdown bar + Shop Now button */
	--kpw-blue-dark: #0b7cc0;
	--kpw-red: #e3262f;        /* close button */
	--kpw-red-dark: #b8141c;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 16px;
}
.kp-welcome[hidden] { display: none; }

.kp-welcome__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 2, .72);
	opacity: 0;
	transition: opacity .3s ease;
}

.kp-welcome__card {
	position: relative;
	width: min(520px, 100%, 68vh);
	border-radius: 18px;
	background: #fff8ea;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 3px var(--kpw-gold);
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px) scale(.96);
	transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}

.kp-welcome.is-open .kp-welcome__backdrop { opacity: 1; }
.kp-welcome.is-open .kp-welcome__card { opacity: 1; transform: none; }

.kp-welcome__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.kp-welcome .kp-welcome__close { /* doubled class: beats the theme's button styles */
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-height: 0;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--kpw-red);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 0 0 4px rgba(227, 38, 47, .3), 0 4px 12px rgba(0, 0, 0, .35);
	transition: transform .15s ease, background .15s ease;
}
.kp-welcome .kp-welcome__close:hover { background: var(--kpw-red-dark); transform: scale(1.06); }
.kp-welcome .kp-welcome__close:focus-visible { outline: 3px solid var(--kpw-gold-2); outline-offset: 2px; }

/* Shop Now: doubled class so the theme's button/link styles don't win. */
.kp-welcome__actions {
	padding: 12px 16px 14px;
	background: #fff8ea;
}
.kp-welcome .kp-welcome__shop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--kpw-blue);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(18, 153, 232, .35);
	transition: background .15s ease, transform .15s ease;
}
.kp-welcome .kp-welcome__shop:hover,
.kp-welcome .kp-welcome__shop:focus-visible { background: var(--kpw-blue-dark); color: #fff; transform: translateY(-1px); }
.kp-welcome .kp-welcome__shop:focus-visible { outline: 3px solid var(--kpw-ink); outline-offset: 2px; }
.kp-welcome .kp-welcome__shop svg { flex: none; }

.kp-welcome__timer {
	height: 6px;
	background: rgba(18, 153, 232, .18);
}
.kp-welcome__timer span {
	display: block;
	height: 100%;
	background: var(--kpw-blue);
	transform-origin: left center;
	transform: scaleX(1);
}
.kp-welcome.is-open .kp-welcome__timer span {
	transform: scaleX(0);
	transition: transform var(--kpw-seconds, 10s) linear;
}

body.kp-welcome-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.kp-welcome__backdrop,
	.kp-welcome__card { transition: opacity .2s ease; transform: none; }
}