/**
 * Floating "Wizard CTA" button, bottom-centre by default.
 *
 * Self-contained: variables.css / generic.css are only enqueued on some
 * templates, so every token carries a hardcoded fallback and .pdr-button
 * is not relied on. Hidden until wizard-cta.js adds .is-visible.
 */

.pdr-wizard-cta {
	position: fixed;
	/* Bottom-centre by default: auto margins centre the shrink-to-fit button
	   between left:0 / right:0. An explicit left/right offset (set inline by
	   pdr_wcta_position) overrides this and pins the chosen edge instead. */
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: -moz-fit-content;
	width: fit-content;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 9000; /* above fixed header (200), below cookie-law-info bar (9999) and modals (10002) */
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 2px solid var(--prodog-bright-green, #00AD3C);
	border-radius: 28px;
	background: var(--prodog-bright-green, #00AD3C);
	color: var(--color-white, #fff);
	font-family: var(--heading-font-family, 'Gotham', sans-serif);
	font-size: var(--font-size-btn, 18px);
	font-weight: var(--font-weight-btn, 900);
	line-height: 1;
	text-decoration: none;
	max-width: calc(100vw - 40px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.pdr-wizard-cta.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* mirrors generic.css .pdr-button:hover */
.pdr-wizard-cta:hover {
	background: var(--prodog-black, #231F20);
	border-color: var(--prodog-black, #231F20);
	color: var(--prodog-yellow, #FDD700);
}

.pdr-wizard-cta .pdr-wizard-cta-icon {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* Hover-icon swap: the hover image is hidden until the button is hovered,
   at which point it replaces the default icon. */
.pdr-wizard-cta-icon--hover {
	display: none;
}

.pdr-wizard-cta--has-hover-icon:hover .pdr-wizard-cta-icon:not(.pdr-wizard-cta-icon--hover) {
	display: none;
}

.pdr-wizard-cta--has-hover-icon:hover .pdr-wizard-cta-icon--hover {
	display: block;
}

@media (max-width: 767px) {
	.pdr-wizard-cta {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		padding: 12px 20px;
		font-size: 16px;
	}
}