/*
 * Armeria 3S Marketing - popup design templates, shared part (release 1.2). Loaded on top of popup.css only when a
 * popup printed on the page uses a template other than "Classic" or a design option; each template adds its own
 * popup-tpl-<template>.css. Per-popup variables (inline style): --a3s-popup-accent, --a3s-popup-accent-text,
 * --a3s-popup-radius. Templates set the defaults --a3s-popup-radius-d, --a3s-popup-pad, --a3s-popup-pad-s.
 * Selectors are prefixed with .a3s-popup so theme link styles (a:hover) never win over the buttons.
 */

.a3s-popup--tpl {
	--a3s-popup-accent-c: var(--a3s-popup-accent, var(--a3s-color-primary, #e95e1b));
	--a3s-popup-accent-t: var(--a3s-popup-accent-text, var(--a3s-color-primary-contrast, #231f20));
	--a3s-popup-surface: var(--a3s-color-surface, #f3f2f0);
	container-type: inline-size;
	border-radius: var(--a3s-popup-radius, var(--a3s-popup-radius-d, var(--a3s-radius-lg, 4px)));
}

.a3s-popup--tpl.a3s-popup--bar-top,
.a3s-popup--tpl.a3s-popup--bar-bottom,
.a3s-popup--tpl.a3s-popup--fullscreen {
	border-radius: 0;
}

.a3s-popup--tpl .a3s-popup__box {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.a3s-popup__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	padding: var(--a3s-popup-pad, 36px 24px 24px);
}

.a3s-popup__body > * {
	max-width: 100%;
	margin: 0;
}

.a3s-popup--fullscreen .a3s-popup__body {
	flex: 0 0 auto;
	padding-top: 56px;
}

.a3s-popup--tpl .a3s-popup__content {
	width: 100%;
}

/* Media ------------------------------------------------------------------ */
.a3s-popup__media {
	min-width: 0;
}

.a3s-popup .a3s-popup__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

.a3s-popup__media--top .a3s-popup__img {
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

.a3s-popup--tpl .a3s-popup__box:has(> .a3s-popup__media--top) > .a3s-popup__close,
.a3s-popup--tpl .a3s-popup__box:has(> .a3s-popup__media--side) > .a3s-popup__close {
	top: 8px;
	right: 8px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .9);
	color: #231f20;
}

/* Texts ------------------------------------------------------------------ */
.a3s-popup__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--a3s-popup-surface);
	color: var(--a3s-popup-accent-c);
}

.a3s-popup .a3s-popup__title {
	font-family: var(--a3s-font-heading, inherit);
	font-size: clamp(1.25rem, 1rem + 2cqi, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
}

.a3s-popup__eyebrow {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--a3s-color-primary-strong, #c4500f);
}

.a3s-popup__subtitle {
	font-size: 1.0625rem;
	font-weight: 500;
	opacity: .85;
}

.a3s-popup__text {
	font-size: 1rem;
	line-height: 1.55;
}

.a3s-popup__text p {
	margin: 0 0 .6em;
}

.a3s-popup__text p:last-child {
	margin-bottom: 0;
}

.a3s-popup .a3s-popup__text a {
	color: inherit;
	text-decoration: underline;
}

/* Buttons ---------------------------------------------------------------- */
.a3s-popup__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 4px;
}

.a3s-popup .a3s-popup__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 10px 24px;
	border: 2px solid transparent;
	border-radius: var(--a3s-radius-sm, 3px);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease;
}

.a3s-popup .a3s-popup__btn:hover {
	filter: brightness(.92);
	text-decoration: none;
}

.a3s-popup .a3s-popup__btn--primary,
.a3s-popup .a3s-popup__btn--primary:hover {
	background: var(--a3s-popup-accent-c);
	color: var(--a3s-popup-accent-t);
}

.a3s-popup .a3s-popup__btn--dark,
.a3s-popup .a3s-popup__btn--dark:hover {
	background: var(--a3s-color-secondary, #231f20);
	color: #fff;
}

.a3s-popup .a3s-popup__btn--outline,
.a3s-popup .a3s-popup__btn--outline:hover {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

.a3s-popup .a3s-popup__link,
.a3s-popup .a3s-popup__link:hover {
	min-height: 44px;
	margin: 0;
	padding: 8px 4px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Coupon ----------------------------------------------------------------- */
.a3s-popup .a3s-popup__coupon {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 360px;
	border: 2px dashed var(--a3s-popup-accent-c);
	border-radius: var(--a3s-radius-sm, 3px);
	overflow: hidden;
}

.a3s-popup__code {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 8px 14px;
	font: 700 1.25rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .08em;
	overflow-wrap: anywhere;
	user-select: all;
}

.a3s-popup .a3s-popup__copy {
	flex: none;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: var(--a3s-popup-accent-c);
	color: var(--a3s-popup-accent-t);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Countdown -------------------------------------------------------------- */
.a3s-popup__cd-units {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.a3s-popup__cd {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 60px;
	padding: 8px 6px;
	border-radius: var(--a3s-radius-sm, 3px);
	background: var(--a3s-popup-surface);
	color: inherit;
}

.a3s-popup__cd b {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.a3s-popup__cd small {
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.a3s-popup .a3s-popup__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Shadow, close button and animation options ----------------------------- */
.a3s-popup.a3s-popup--tpl.a3s-popup--shadow-none {
	box-shadow: none;
}

.a3s-popup.a3s-popup--tpl.a3s-popup--shadow-soft {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}

.a3s-popup.a3s-popup--tpl.a3s-popup--shadow-strong {
	box-shadow: 0 24px 64px rgba(0, 0, 0, .42);
}

.a3s-popup.a3s-popup--tpl.a3s-popup--close-circle .a3s-popup__box > .a3s-popup__close {
	top: 8px;
	right: 8px;
	width: 40px;
	height: 40px;
	background: var(--a3s-color-secondary, #231f20);
	color: #fff;
}

.a3s-popup.a3s-popup--tpl.a3s-popup--close-circle .a3s-popup__box > .a3s-popup__close:hover {
	background: var(--a3s-color-dark-2, #3a3536);
}

.a3s-popup.a3s-popup--tpl.a3s-popup--close-label .a3s-popup__box > .a3s-popup__close {
	top: 8px;
	right: 8px;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	width: auto;
	height: 36px;
	padding: 0 10px 0 14px;
	border: 1px solid currentColor;
	border-radius: 999px;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom).a3s-popup--close-label .a3s-popup__box > .a3s-popup__close {
	top: 50%;
	margin-top: -18px;
}

.a3s-popup.a3s-popup--animation-none[open] {
	animation: none;
}

@keyframes a3s-tpl-zoom {
	from { opacity: 0; transform: scale(.92); }
	to { opacity: 1; transform: none; }
}

@keyframes a3s-tpl-slide {
	from { opacity: 0; transform: translateY(32px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.a3s-popup.a3s-popup--animation-fade[open] {
		animation: a3s-popup-fade .25s ease-out;
	}

	.a3s-popup.a3s-popup--animation-zoom[open] {
		animation: a3s-tpl-zoom .3s cubic-bezier(.2, .8, .2, 1);
	}

	.a3s-popup.a3s-popup--animation-slide[open] {
		animation: a3s-tpl-slide .35s cubic-bezier(.2, .8, .2, 1);
	}

	.a3s-popup.a3s-popup--bar-top.a3s-popup--animation-slide[open] {
		animation-name: a3s-popup-down;
	}

	.a3s-popup.a3s-popup--bar-bottom.a3s-popup--animation-slide[open] {
		animation-name: a3s-popup-up;
	}
}

/* Bars: one row, no banner image ---------------------------------------- */
.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__box {
	flex-direction: row;
	align-items: center;
	padding: 0;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	padding: 12px 56px 12px 16px;
	text-align: left;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__media:not(.a3s-popup__media--bg) {
	display: none;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__title {
	font-size: 1.125rem;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__icon {
	width: 40px;
	height: 40px;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__text p {
	margin: 0;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__actions {
	margin: 0;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__coupon {
	width: auto;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__cd {
	min-width: 48px;
	padding: 4px;
}

.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__cd b {
	font-size: 1.125rem;
}

/* Small screens ---------------------------------------------------------- */
@media (max-width: 575px) {
	.a3s-popup--tpl .a3s-popup__body {
		padding: var(--a3s-popup-pad-s, 36px 16px 16px);
	}

	.a3s-popup--fullscreen.a3s-popup--tpl .a3s-popup__body {
		padding-top: 56px;
	}

	.a3s-popup--tpl:is(.a3s-popup--bar-top, .a3s-popup--bar-bottom) .a3s-popup__body {
		justify-content: flex-start;
		padding: 12px 52px 12px 12px;
	}

	.a3s-popup .a3s-popup__btn {
		padding-inline: 18px;
	}
}