/* Download Movie button: paste into Appearance > Customize > Additional CSS
   (or your child theme's style.css). Change the two variables to match your brand. */

.svd-download {
	--svd-bg: #1f6feb;
	--svd-bg-hover: #1858c4;
	margin: 18px 0 8px;
	text-align: center;
}

.svd-download__button,
.svd-download__button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: 6px;
	background: var(--svd-bg);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.svd-download__button::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM4 19h16v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3zM4 19h16v2H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.svd-download__button:hover,
.svd-download__button:focus {
	background: var(--svd-bg-hover);
	color: #fff;
}

.svd-download__button:focus-visible {
	outline: 3px solid var(--svd-bg);
	outline-offset: 3px;
}

.svd-download__note {
	margin: 8px 0 0;
	font-size: 13px;
	opacity: 0.75;
}

@media (max-width: 480px) {
	.svd-download__button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.svd-download__button {
		transition: none;
	}
}