.ftdp-bar,
.ftdp-card {
	--ftdp-x: 22px;
	--ftdp-y: 22px;
	--ftdp-user-s: 1;
	--ftdp-s: var(--ftdp-user-s);
	font-family: Mulish, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
	z-index: 999999;
}

.ftdp-bar *,
.ftdp-card * { box-sizing: border-box; }

/* ==================================================================
 * Bar
 * ================================================================== */

.ftdp-bar {
	position: fixed;
	display: flex;
	align-items: center;
	gap: calc(15px * var(--ftdp-s));
	flex-wrap: wrap;
	padding: calc(13px * var(--ftdp-s)) calc(20px * var(--ftdp-s));
	font-size: calc(15px * var(--ftdp-s));
	line-height: 1.45;
	transition: transform .28s ease, opacity .28s ease;
}

.ftdp-bar--full { left: 0; right: 0; }
.ftdp-bar--full.ftdp-bar--top { top: 0; transform: translateY(-100%); }
.ftdp-bar--full.ftdp-bar--bottom { bottom: 0; transform: translateY(100%); }
.ftdp-bar--full.is-visible { transform: translateY(0); }

.ftdp-bar--boxed {
	left: var(--ftdp-x);
	right: var(--ftdp-x);
	max-width: 1040px;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	opacity: 0;
}

.ftdp-bar--boxed.ftdp-bar--top { top: var(--ftdp-y); transform: translateY(-16px); }
.ftdp-bar--boxed.ftdp-bar--bottom { bottom: var(--ftdp-y); transform: translateY(16px); }
.ftdp-bar--boxed.is-visible { opacity: 1; transform: translateY(0); }

/* ==================================================================
 * Card
 * ================================================================== */

.ftdp-card {
	position: fixed;
	width: min(var(--ftdp-w, 360px), calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	padding: calc(18px * var(--ftdp-s)) calc(20px * var(--ftdp-s)) calc(20px * var(--ftdp-s));
	border-radius: 14px;
	box-shadow: 0 14px 38px rgba(0, 0, 0, .26);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
}

.ftdp-card--top-left { top: var(--ftdp-y); left: var(--ftdp-x); transform: translateY(-16px); }
.ftdp-card--top-right { top: var(--ftdp-y); right: var(--ftdp-x); transform: translateY(-16px); }
.ftdp-card--bottom-left { bottom: var(--ftdp-y); left: var(--ftdp-x); transform: translateY(16px); }
.ftdp-card--bottom-right { bottom: var(--ftdp-y); right: var(--ftdp-x); transform: translateY(16px); }

.ftdp-card--top-left.is-visible,
.ftdp-card--top-right.is-visible,
.ftdp-card--bottom-left.is-visible,
.ftdp-card--bottom-right.is-visible { opacity: 1; transform: translateY(0); }

.ftdp-card--bottom-center {
	bottom: var(--ftdp-y);
	left: 50%;
	transform: translate(-50%, 16px);
}

.ftdp-card--top-center {
	top: var(--ftdp-y);
	left: 50%;
	transform: translate(-50%, -16px);
}

.ftdp-card--bottom-center.is-visible,
.ftdp-card--top-center.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==================================================================
 * Parts - every size derives from --ftdp-s
 * ================================================================== */

.ftdp-badge {
	display: inline-block;
	background: rgba(255, 255, 255, .22);
	padding: calc(4px * var(--ftdp-s)) calc(12px * var(--ftdp-s));
	border-radius: 20px;
	font-size: calc(12px * var(--ftdp-s));
	font-weight: 700;
	white-space: nowrap;
}

.ftdp-text { flex: 1 1 220px; }

.ftdp-countdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: calc(14px * var(--ftdp-s));
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.ftdp-coupon {
	border: 1px dashed currentColor;
	border-radius: 5px;
	padding: calc(5px * var(--ftdp-s)) calc(12px * var(--ftdp-s));
	font-size: calc(13px * var(--ftdp-s));
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	background: none;
	color: inherit;
	opacity: .7;
	font-family: inherit;
}

.ftdp-coupon:hover { opacity: 1; }

.ftdp-cta {
	display: inline-block;
	padding: calc(11px * var(--ftdp-s)) calc(22px * var(--ftdp-s));
	border-radius: 7px;
	font-size: calc(14px * var(--ftdp-s));
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .15s ease;
}

.ftdp-cta:hover { opacity: .88; text-decoration: none; }

.ftdp-close {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: calc(22px * var(--ftdp-s));
	line-height: 1;
	padding: 2px 6px;
	color: inherit;
	opacity: .75;
}

.ftdp-close:hover { opacity: 1; }

.ftdp-bar-actions {
	display: flex;
	align-items: center;
	gap: calc(13px * var(--ftdp-s));
	margin-left: auto;
}

.ftdp-card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: calc(12px * var(--ftdp-s));
}

.ftdp-card-head .ftdp-close { margin-left: auto; }

.ftdp-card .ftdp-text {
	font-size: calc(17px * var(--ftdp-s));
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 calc(12px * var(--ftdp-s));
}

.ftdp-card .ftdp-countdown {
	margin-bottom: calc(14px * var(--ftdp-s));
	font-size: calc(15px * var(--ftdp-s));
}

.ftdp-card .ftdp-cta { display: block; text-align: center; }
.ftdp-card .ftdp-coupon { display: block; width: 100%; margin-top: calc(10px * var(--ftdp-s)); }

/* ==================================================================
 * Tablets - bar keeps its row, card narrows
 * ================================================================== */

@media (max-width: 900px) {
	.ftdp-card { width: min(var(--ftdp-w, 360px), calc(100vw - 32px)); }
	.ftdp-bar { gap: calc(12px * var(--ftdp-s)); }
}

/* ==================================================================
 * Phones - cards dock full bleed, bar stacks its actions
 * ================================================================== */

@media (max-width: 640px) {
	.ftdp-bar {
		padding: calc(11px * var(--ftdp-s)) calc(13px * var(--ftdp-s));
		font-size: calc(14px * var(--ftdp-s));
	}

	.ftdp-bar--boxed { left: 10px; right: 10px; }

	.ftdp-bar-actions {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
		gap: 10px;
	}

	.ftdp-bar .ftdp-cta { flex: 1 1 auto; text-align: center; }

	.ftdp-card--top-left,
	.ftdp-card--top-right,
	.ftdp-card--top-center,
	.ftdp-card--bottom-left,
	.ftdp-card--bottom-right,
	.ftdp-card--bottom-center {
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
	}

	.ftdp-card--bottom-center,
	.ftdp-card--top-center { transform: translateY(16px); }

	.ftdp-card--bottom-center.is-visible,
	.ftdp-card--top-center.is-visible { transform: translateY(0); }

	.ftdp-card--top-left,
	.ftdp-card--top-right,
	.ftdp-card--top-center { top: 12px; bottom: auto; }

	.ftdp-card--bottom-left,
	.ftdp-card--bottom-right,
	.ftdp-card--bottom-center { bottom: 12px; top: auto; }
}

/* ==================================================================
 * Small phones - trim the scale so nothing wraps awkwardly
 * ================================================================== */

@media (max-width: 400px) {
	.ftdp-bar,
	.ftdp-card { --ftdp-s: calc(0.92 * var(--ftdp-user-s)); }
	.ftdp-card { border-radius: 12px; }
}

/* ==================================================================
 * Short viewports - landscape phones, split screen, the Envato frame
 * ================================================================== */

@media (max-height: 520px) {
	.ftdp-bar,
	.ftdp-card { --ftdp-s: calc(0.88 * var(--ftdp-user-s)); }

	.ftdp-card {
		max-height: calc(100vh - 16px);
		padding-top: calc(14px * var(--ftdp-s));
	}

	.ftdp-card--top-left,
	.ftdp-card--top-right,
	.ftdp-card--top-center { top: 8px; }

	.ftdp-card--bottom-left,
	.ftdp-card--bottom-right,
	.ftdp-card--bottom-center { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.ftdp-bar,
	.ftdp-card { transition: none; }
}