/**
 * Welcome offer popup.
 *
 * Every declaration that the theme could plausibly touch is pinned with
 * !important, the same as the OTP modal's chips: the theme styles bare
 * buttons, headings and paragraphs globally and wins otherwise.
 *
 * Colours and type are custom properties on the card, so the whole look can
 * be retuned from Custom CSS without touching this file:
 *
 *   .sb-wel-card { --sb-wel-green: #0f4d2c; --sb-wel-serif: Georgia, serif; }
 */

.sb-wel-card {
	--sb-wel-cream:   #fdfaf2;
	--sb-wel-border:  #e9dfc6;
	--sb-wel-green:   #14532d;
	--sb-wel-cta:     #1a6b45;
	--sb-wel-cta-hov: #13573a;
	--sb-wel-gold:    #a8873d;
	--sb-wel-ink:     #24211b;
	--sb-wel-muted:   #5f5a4e;
	--sb-wel-quiet:   #948c7c;
	--sb-wel-badge:   #eef0e2;
	--sb-wel-leaf:    #aebd94;

	/* Playfair is loaded by the plugin, only for visitors who can see the
	   popup, and without blocking the page. Lato is already on the site. */
	--sb-wel-serif: "Playfair Display", "Roboto Slab", Georgia, "Times New Roman", serif;
	--sb-wel-sans:  "Lato", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- overlay ---------------------------------------------------------- */

.sb-wel-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999990 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	background: rgba(24, 20, 12, 0) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity .3s ease, background-color .3s ease, visibility .3s !important;
}

.sb-wel-overlay.sb-wel-open {
	opacity: 1 !important;
	visibility: visible !important;
	background: rgba(24, 20, 12, .48) !important;
}

/* ---- card ------------------------------------------------------------- */

.sb-wel-card {
	position: relative !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 520px !important;
	max-height: calc(100vh - 32px) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--sb-wel-cream) !important;
	border: 1px solid var(--sb-wel-border) !important;
	border-radius: 22px !important;
	box-shadow: 0 24px 60px rgba(30, 24, 10, .28) !important;
	text-align: center !important;
	transform: translateY(18px) scale(.97) !important;
	transition: transform .34s cubic-bezier(.2, .9, .3, 1.05) !important;
	-webkit-overflow-scrolling: touch;
}

.sb-wel-overlay.sb-wel-open .sb-wel-card {
	transform: translateY(0) scale(1) !important;
}

.sb-wel-inner {
	position: relative !important;
	z-index: 1 !important;
	padding: 44px 40px 30px !important;
}

/* ---- botanical corners ------------------------------------------------ */

.sb-wel-leaf {
	position: absolute !important;
	z-index: 0 !important;
	display: block !important;
	width: 172px !important;
	height: 172px !important;
	color: var(--sb-wel-leaf) !important;
	pointer-events: none !important;
	line-height: 0 !important;
}

.sb-wel-leaf svg {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.sb-wel-leaf-tl {
	top: 0 !important;
	left: 0 !important;
}

/* The same sprig, turned to grow in from the opposite corner. */
.sb-wel-leaf-br {
	right: 0 !important;
	bottom: 0 !important;
	transform: rotate(180deg) !important;
}

/* ---- close ------------------------------------------------------------ */

.sb-wel-close {
	position: absolute !important;
	z-index: 3 !important;
	top: 16px !important;
	right: 16px !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--sb-wel-ink) !important;
	font: 300 30px/38px var(--sb-wel-sans) !important;
	text-align: center !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	opacity: .7 !important;
	transition: opacity .15s ease, background-color .15s ease !important;
}

.sb-wel-close:hover,
.sb-wel-close:focus {
	opacity: 1 !important;
	background: rgba(36, 33, 27, .06) !important;
	outline: none !important;
}

.sb-wel-close:focus-visible {
	box-shadow: 0 0 0 2px var(--sb-wel-cta) !important;
}

/* ---- gift badge ------------------------------------------------------- */

.sb-wel-badge {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 96px !important;
	height: 96px !important;
	margin: 0 auto 22px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--sb-wel-badge) !important;
	color: var(--sb-wel-green) !important;
}

.sb-wel-badge svg {
	display: block !important;
	width: 46px !important;
	height: 46px !important;
}

.sb-wel-badge img {
	display: block !important;
	max-width: 62% !important;
	max-height: 62% !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	object-fit: contain !important;
}

/* ---- eyebrow with rules either side ---------------------------------- */

.sb-wel-eyebrow {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	color: var(--sb-wel-gold) !important;
	font: 700 14px/1.3 var(--sb-wel-sans) !important;
	letter-spacing: .3em !important;
	text-transform: uppercase !important;
}

.sb-wel-eyebrow::before,
.sb-wel-eyebrow::after {
	content: "" !important;
	display: block !important;
	flex: 0 0 30px !important;
	height: 1px !important;
	background: currentColor !important;
	opacity: .8 !important;
}

/* ---- the big number --------------------------------------------------- */

.sb-wel-amount {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--sb-wel-green) !important;
	font-family: var(--sb-wel-serif) !important;
	font-size: clamp(52px, calc((100vw - 32px) * .205), 106px) !important;
	font-weight: 900 !important;
	font-variant-numeric: lining-nums !important;
	font-feature-settings: "lnum" 1 !important;
	line-height: .95 !important;
	letter-spacing: -.015em !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

.sb-wel-card h2.sb-wel-heading {
	margin: 4px 0 18px !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--sb-wel-ink) !important;
	font-family: var(--sb-wel-sans) !important;
	font-size: clamp(26px, calc((100vw - 32px) * .078), 40px) !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
}

/* With no big line set, the heading takes its place. */
.sb-wel-card.sb-wel-no-amount h2.sb-wel-heading {
	margin-top: 0 !important;
	color: var(--sb-wel-green) !important;
	font-size: clamp(28px, 6.4vw, 38px) !important;
}

.sb-wel-text {
	margin: 0 auto 26px !important;
	padding: 0 !important;
	max-width: 400px !important;
	color: var(--sb-wel-muted) !important;
	font: 400 18px/1.55 var(--sb-wel-sans) !important;
}

/* ---- buttons ---------------------------------------------------------- */

.sb-wel-cta {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	box-sizing: border-box !important;
	width: 100% !important;
	min-height: 60px !important;
	padding: 16px 24px !important;
	margin: 0 0 14px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--sb-wel-cta) !important;
	color: #fff !important;
	font: 700 20px/1.2 var(--sb-wel-sans) !important;
	letter-spacing: .005em !important;
	text-align: center !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(20, 83, 45, .22) !important;
	cursor: pointer !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.sb-wel-cta svg {
	flex: 0 0 auto !important;
	width: 20px !important;
	height: 20px !important;
	transition: transform .18s ease !important;
}

.sb-wel-cta:hover,
.sb-wel-cta:focus {
	background: var(--sb-wel-cta-hov) !important;
	color: #fff !important;
	outline: none !important;
}

.sb-wel-cta:hover svg {
	transform: translateX(3px) !important;
}

.sb-wel-cta:active {
	transform: translateY(1px) !important;
	box-shadow: 0 3px 8px rgba(20, 83, 45, .2) !important;
}

.sb-wel-cta:focus-visible {
	box-shadow: 0 0 0 3px rgba(26, 107, 69, .35), 0 6px 16px rgba(20, 83, 45, .22) !important;
}

.sb-wel-decline {
	display: inline-block !important;
	padding: 6px 8px !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--sb-wel-ink) !important;
	font: 400 17px/1.4 var(--sb-wel-sans) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-thickness: 1px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	opacity: .8 !important;
}

.sb-wel-decline:hover,
.sb-wel-decline:focus {
	opacity: 1 !important;
	outline: none !important;
}

.sb-wel-foot {
	margin: 12px 0 0 !important;
	padding: 0 !important;
	color: var(--sb-wel-quiet) !important;
	font: 400 15px/1.4 var(--sb-wel-sans) !important;
}

/* ---- small screens ---------------------------------------------------- */

@media (max-width: 480px) {
	.sb-wel-inner {
		padding: 38px 22px 24px !important;
	}

	.sb-wel-leaf {
		width: 120px !important;
		height: 120px !important;
	}

	.sb-wel-badge {
		width: 78px !important;
		height: 78px !important;
		margin-bottom: 18px !important;
	}

	.sb-wel-badge svg {
		width: 38px !important;
		height: 38px !important;
	}

	.sb-wel-eyebrow {
		font-size: 12px !important;
		letter-spacing: .26em !important;
		gap: 10px !important;
	}

	.sb-wel-eyebrow::before,
	.sb-wel-eyebrow::after {
		flex-basis: 20px !important;
	}

	.sb-wel-text {
		font-size: 15.5px !important;
		margin-bottom: 22px !important;
	}

	.sb-wel-decline {
		font-size: 15.5px !important;
	}

	.sb-wel-foot {
		font-size: 13.5px !important;
	}

	.sb-wel-cta {
		min-height: 54px !important;
		font-size: 17px !important;
	}
}

/* Short screens, such as a phone held sideways: the card scrolls inside
   itself rather than running off the top and bottom. */
@media (max-height: 640px) {
	.sb-wel-inner {
		padding-top: 30px !important;
		padding-bottom: 20px !important;
	}

	.sb-wel-badge {
		width: 64px !important;
		height: 64px !important;
		margin-bottom: 12px !important;
	}

	.sb-wel-badge svg {
		width: 32px !important;
		height: 32px !important;
	}
}

/* Someone who asked for less motion gets the card without the movement. */
@media (prefers-reduced-motion: reduce) {
	.sb-wel-overlay,
	.sb-wel-card,
	.sb-wel-cta,
	.sb-wel-cta svg {
		transition: opacity .01s linear !important;
	}

	.sb-wel-card,
	.sb-wel-overlay.sb-wel-open .sb-wel-card,
	.sb-wel-cta:hover svg {
		transform: none !important;
	}
}