#pqr-popup {
	align-items: center;
	animation: pqrFadeIn 0.25s ease-out;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999999;

	@keyframes pqrFadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	& .pqr-inner {
		animation: pqrSlideUp 0.3s ease-out;
		background: #fff;
		border-radius: none;
		box-shadow: none;
		height: 100%;
		max-height: 100vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 60px 20px 20px 20px;
		position: relative;
		text-align: center;
		width: 100%;

		@media (min-width: 950px) {
			border-radius: 10px;
			box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
			height: auto;
			max-height: 90vh;
			max-width: 649px;
			padding: 40px 24px;
			width: 95%;
		}
	}

	@keyframes pqrSlideUp {
		from {
			opacity: 0;
			transform: translateY(15px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	& .pqr-close-btn {
		background: transparent;
		border: none;
		color: var(--wp--preset--color--blue);
		cursor: pointer;
		font-size: 28px;
		position: absolute;
		right: 12px;
		top: 12px;
		transition: color 0.15s ease;
	}

	& .pqr-question {
		padding: 20px 30px 30px 30px;
	}

	& .pqr-close-btn:hover {
		color: #000;
	}

	& .pqr-answers {
		align-items: center;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	& .pqr-answer {
		background: #f5f5f5;
		background: var(--wp--preset--color--light-gray);
		border: none;
		border-radius: 6px;
		color: #424242;
		color: var(--wp--preset--color--near-black);
		cursor: pointer;
		font-size: 16px;
		padding: 12px 16px;
		transition: background 0.15s, transform 0.1s;
		width: 80%;
	}

	/* Desktop hover only */
	@media (hover: hover) and (pointer: fine) {
		& .pqr-answer:hover {
			background: #0057b8;
			background: var(--wp--preset--color--blue);
			color: #fff;
		}
	}

	/* Mobile / touch feedback */
	& .pqr-answer:active {
		background: var(--wp--preset--color--blue);
		color: #fff;
		transform: scale(0.97);
	}

	& #pqr-lead-form {
		max-width: 80%;
		width: 100%;
	}

	& .pqr-result-container {
		align-items: center;
		display: flex;
		flex-flow: column;

		& .pqr-result {
			max-width: 90%;
			width: 100%;

			& button {
				margin: 10px 0 15px 0;
				padding: 10px 20px 12px 20px;
			}

			& ul {
				justify-self: center;
				text-align: left;
				width: fit-content;
			}
		}
	}

	& .pqr-underage-container {
		align-items: center;
		display: flex;
		flex-flow: column;

		& .pqr-underage {
			max-width: 540px;
			text-align: left;

			& .h3 {
				font-size: var(--wp--preset--font-size--xl);
				font-weight: 800;
				margin: 0 0 20px;
				text-align: center;

			}
		}
	}

	& .leadGateForm-container {
		& .h2 {
			margin-top: 32px;
		}
		& .leadGateForm {
			align-items: center;
			display: flex;
			flex-flow: column;

			& p {
				margin-bottom: 32px;
				max-width: 450px;
			}
		}
	}
	& #pqr-lead-form input[type="text"],
	& #pqr-lead-form input[type="email"] {
		border: 1px solid #ccc;
		border-radius: 6px;
		margin-bottom: 12px;
		padding: 12px;
		width: 100%;
	}

	& #pqr-lead-form select {
		appearance: none;
		background-image:
			linear-gradient(45deg, transparent 50%, gray 50%),
			linear-gradient(135deg, gray 50%, transparent 50%);
		background-position:
			calc(100% - 15px) calc(1.2em + -2px),
			calc(100% - 10px) calc(1.2em + -2px);
		background-repeat: no-repeat;
		background-size:
			5px 5px,
			5px 5px,
			1px 1.5em;
		border: 1px solid #ccc;
		cursor: pointer;
		margin-bottom: 12px;
		padding: 12px;
		padding: 0 var(--wp--preset--spacing--3-x);
		width: 100%;
	}

	& #pqr-lead-form button {
		background: #0057b8;
		background: var(--wp--preset--color--blue);
		border: none;
		border-radius: 100px;
		color: #fff;
		cursor: pointer;
		font-size: 20px;
		margin-top: 20px;
		padding: 16px 25px;
		transition: background 0.2s;
	}

	& #pqr-lead-form button:hover {
		filter: var(--wp--custom--f-button-brightness);
	}

	/* Progress Header */
	& .pqr-progress-header {
		align-items: center;
		display: flex;
		flex-flow: column;
		margin-bottom: 15px;
		width: 100%;
	}

	& .pqr-step-counter {
		color: var(--wp--preset--color--near-black);
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 6px;
		text-align: left;
	}

	& .pqr-progress-bar-container {
		background: #e5e5e5;
		border-radius: 4px;
		height: 6px;
		overflow: hidden;
		width: 80%;
	}

	& .pqr-progress-bar {
		background: #0057b8;
		height: 6px;
		transition: width 0.3s ease;
		width: 0%;
	}

}