/*
 * Free samples tab on the right edge of the screen, and the popup form it
 * opens. Markup in functions.php, behavior in free-samples.js.
 */

#sticky-tab {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 9px;
	background: linear-gradient(180deg, rgb(255, 60, 60) 0%, rgb(210, 20, 20) 100%);
	color: #fff;
	cursor: pointer;
	z-index: 9999;
	border-radius: 10px 0 0 10px;
	font-family: system-ui, -apple-system, sans-serif;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
	transition: background 0.2s ease;
}

#sticky-tab:hover {
	background: linear-gradient(180deg, rgb(255, 40, 40) 0%, rgb(185, 10, 10) 100%);
}

#sticky-tab-dot {
	width: 7px;
	height: 7px;
	background: #fff;
	border-radius: 50%;
	flex-shrink: 0;
}

#sticky-tab-label {
	writing-mode: vertical-rl;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

#form-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.65);
	z-index: 9998;
	padding: 20px;
	box-sizing: border-box;
}

#form-modal-overlay.open {
	display: flex;
}

#form-modal {
	position: relative;
	width: min(900px, 100%);
	height: min(85vh, 760px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

#form-modal iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

#close-modal {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	cursor: pointer;
	z-index: 1;
	font-size: 18px;
	line-height: 1;
}

body.form-modal-open {
	overflow: hidden;
}

/* On larger screens the tab nudges and glows until it's first hovered. */

@keyframes tab-nudge {
	0%, 60%, 100% { transform: translateY(-50%) translateX(0) scale(1); }
	65%           { transform: translateY(-50%) translateX(-14px) scale(1.04); }
	72%           { transform: translateY(-50%) translateX(-4px) scale(1.01); }
	77%           { transform: translateY(-50%) translateX(-10px) scale(1.03); }
	83%           { transform: translateY(-50%) translateX(0) scale(1); }
}

@keyframes tab-glow {
	0%, 100% { box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25), 0 0 0 0px rgba(92, 184, 92, 0); }
	50%      { box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25), 0 0 22px 8px rgba(255, 60, 60, 0.7); }
}

@keyframes dot-ping {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
	70%  { box-shadow: 0 0 0 13px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (min-width: 768px) {
	#sticky-tab {
		padding: 18px 13px;
		gap: 13px;
		animation: tab-nudge 3.1s ease-in-out infinite, tab-glow 3.1s ease-in-out infinite;
	}

	#sticky-tab-dot {
		width: 10px;
		height: 10px;
		animation: dot-ping 1.2s ease-out infinite;
	}

	#sticky-tab-label {
		font-size: 15px;
		letter-spacing: 0.75px;
	}

	#sticky-tab:hover,
	#sticky-tab.nudge-stopped {
		animation: none;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25);
	}

	#sticky-tab.nudge-stopped #sticky-tab-dot,
	#sticky-tab:hover #sticky-tab-dot {
		animation: none;
	}
}