/**
 * TPF Offer Popup.
 *
 * Written to survive a page theme it knows nothing about. Everything is scoped
 * under the popup's own id, every property a theme is likely to set on a form is
 * set here explicitly, and the artwork is never cropped: the designer burns the
 * offer text into the image, so a cropped image is an unreadable offer.
 */

#tpf-offer-popup[hidden] {
	display: none !important;
}

#tpf-offer-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(17, 17, 17, 0.62);
	box-sizing: border-box;
	overflow-y: auto;
	-webkit-font-smoothing: antialiased;
}

#tpf-offer-popup *,
#tpf-offer-popup *::before,
#tpf-offer-popup *::after {
	box-sizing: border-box;
}

html.tpf-offer-popup-open,
html.tpf-offer-popup-open body {
	overflow: hidden;
}

/**
 * The panel is sized from the artwork.
 *
 * The image is never cropped and never letterboxed, which means the panel has
 * to be the thing that gives way. Its width is capped by three things at once:
 * the design width, the screen width, and how wide the image is allowed to be
 * if it is to stay within its share of the screen height. The plugin writes the
 * real aspect ratio of the uploaded file into --tpf-offer-ratio, so the third
 * cap is measured, not assumed.
 */
/* How much of the screen height the artwork may take. The form needs roughly
   210px under it on a desktop, so this leaves the whole popup in view without
   the visitor having to scroll to find the button. */
#tpf-offer-popup {
	--tpf-offer-media-vh: 62vh;
}

/* On the first step of a two step popup the only thing under the artwork is a
   pair of buttons, about 90px on a desktop and 140px on a phone, so the picture
   is allowed considerably more of the screen. Measured against the smallest
   common phone (a 667px tall iPhone SE): 70vh is 467px of artwork plus 138px of
   buttons, which is 605px inside a 643px usable height. */
#tpf-offer-popup[data-tpf-offer-step="offer"] {
	--tpf-offer-media-vh: 70vh;
}

/* --------------------------------------------------------------------------
 * Steps
 *
 * One attribute on the root decides what is on screen. It is set server side
 * for the first paint and moved by the script when the visitor says yes, so
 * there is never a frame where both steps are visible.
 * ----------------------------------------------------------------------- */

#tpf-offer-popup[data-tpf-offer-step="form"] .tpf-offer-popup__choice {
	display: none;
}

#tpf-offer-popup .tpf-offer-popup {
	position: relative;
	width: 100%;
	max-width: min(
		1200px,
		calc(var(--tpf-offer-media-vh) * var(--tpf-offer-ratio, 1.5))
	);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	margin: auto;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
	font-family: inherit;
	color: #222222;
	text-align: left;
	animation: tpf-offer-popup-in 220ms ease-out;
}

@keyframes tpf-offer-popup-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	#tpf-offer-popup .tpf-offer-popup {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
 * The artwork
 * ----------------------------------------------------------------------- */

#tpf-offer-popup .tpf-offer-popup__media {
	line-height: 0;
	background: #f4f4f4;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

#tpf-offer-popup .tpf-offer-popup__media img {
	display: block;
	width: 100%;
	height: auto;
	/* The width cap on the panel above normally keeps the image inside this, so
	   it never binds. It is here as a backstop for artwork whose real dimensions
	   WordPress could not read, and contain rather than cover because a cropped
	   image is an unreadable offer. */
	max-height: var(--tpf-offer-media-vh);
	object-fit: contain;
	object-position: center;
	margin: 0;
}

/* --------------------------------------------------------------------------
 * The close button, in the corner the designer keeps clear
 * ----------------------------------------------------------------------- */

#tpf-offer-popup .tpf-offer-popup__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #222222;
	font-size: 26px;
	line-height: 38px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background 150ms ease;
}

#tpf-offer-popup .tpf-offer-popup__close:hover,
#tpf-offer-popup .tpf-offer-popup__close:focus {
	background: #ffffff;
	outline: 2px solid #222222;
	outline-offset: 2px;
}

/* On the offer step the no button is already the way out, so a cross would be a
   second control saying the same thing. It comes back with the form, where
   there is no no button. display:none also drops it from the focus trap, which
   reads offsetParent. */
#tpf-offer-popup[data-tpf-offer-step="offer"] .tpf-offer-popup__close {
	display: none;
}

/* --------------------------------------------------------------------------
 * The form
 * ----------------------------------------------------------------------- */

#tpf-offer-popup .tpf-offer-popup__form,
#tpf-offer-popup .tpf-offer-popup__success {
	padding: 20px 24px 24px;
	margin: 0;
}

#tpf-offer-popup .tpf-offer-popup__fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0 0 14px;
}

#tpf-offer-popup .tpf-offer-popup__field {
	margin: 0;
}

#tpf-offer-popup .tpf-offer-popup__field label {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #333333;
	text-transform: none;
	letter-spacing: 0;
}

#tpf-offer-popup .tpf-offer-popup__field input,
#tpf-offer-popup .tpf-offer-popup__field textarea {
	display: block;
	width: 100%;
	height: auto;
	min-height: 46px;
	padding: 10px 12px;
	margin: 0;
	border: 1px solid #c8c8c8;
	border-radius: 6px;
	background: #ffffff;
	color: #222222;
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	line-height: 1.3;
	box-shadow: none;
}

#tpf-offer-popup .tpf-offer-popup__field input:focus,
#tpf-offer-popup .tpf-offer-popup__field textarea:focus {
	border-color: #222222;
	outline: 2px solid #222222;
	outline-offset: 1px;
}

/* The question sits under the three contact fields, across the full width.
   Resizing is left on vertically only: a visitor with a lot to say should be
   able to see it, but dragging it wider would break the panel. */
#tpf-offer-popup .tpf-offer-popup__field--question {
	grid-column: 1 / -1;
}

#tpf-offer-popup .tpf-offer-popup__field--question textarea {
	resize: vertical;
	max-height: 160px;
}

#tpf-offer-popup .tpf-offer-popup__consent {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.45;
	color: #444444;
}

#tpf-offer-popup .tpf-offer-popup__consent label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: 400;
}

#tpf-offer-popup .tpf-offer-popup__consent input {
	margin: 3px 0 0;
	flex: 0 0 auto;
}

/* The spam trap. Reachable by a script, invisible to a person, and skipped by
   the keyboard and by screen readers. */
#tpf-offer-popup .tpf-offer-popup__trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

#tpf-offer-popup .tpf-offer-popup__turnstile {
	margin: 0 0 14px;
}

#tpf-offer-popup .tpf-offer-popup__actions {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Step one: yes and no
 * ----------------------------------------------------------------------- */

#tpf-offer-popup .tpf-offer-popup__choice {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 24px 24px;
	margin: 0;
}

/* Yes carries the same weight as the submit button, because it is the same
   decision one screen earlier. */
#tpf-offer-popup .tpf-offer-popup__yes {
	order: 1;
}

/* No is a quiet button rather than a link: it has to be an easy, obvious tap on
   a phone, but it must never compete with yes. */
#tpf-offer-popup .tpf-offer-popup__decline {
	order: 2;
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 20px;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: #666666;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: underline;
	cursor: pointer;
}

#tpf-offer-popup .tpf-offer-popup__decline:hover,
#tpf-offer-popup .tpf-offer-popup__decline:focus {
	color: #222222;
}

#tpf-offer-popup .tpf-offer-popup__yes,
#tpf-offer-popup .tpf-offer-popup__submit {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: #222222;
	color: #ffffff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: opacity 150ms ease;
}

#tpf-offer-popup .tpf-offer-popup__yes:hover,
#tpf-offer-popup .tpf-offer-popup__submit:hover {
	opacity: 0.88;
}

#tpf-offer-popup .tpf-offer-popup__submit:focus {
	outline: 2px solid #222222;
	outline-offset: 2px;
}

#tpf-offer-popup .tpf-offer-popup__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

#tpf-offer-popup .tpf-offer-popup__message {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: #444444;
}

#tpf-offer-popup .tpf-offer-popup__message:empty {
	display: none;
}

#tpf-offer-popup .tpf-offer-popup__message.is-error {
	color: #a32020;
	font-weight: 600;
}

#tpf-offer-popup .tpf-offer-popup__privacy {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #666666;
}

#tpf-offer-popup .tpf-offer-popup__privacy a {
	color: #666666;
	text-decoration: underline;
}

#tpf-offer-popup .tpf-offer-popup__success {
	text-align: center;
}

#tpf-offer-popup .tpf-offer-popup__success p {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.5;
	color: #222222;
}

#tpf-offer-popup .tpf-offer-popup__done {
	max-width: 220px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
 * Mobile. Part screen on purpose: a full screen interstitial is penalised.
 * ----------------------------------------------------------------------- */

@media (max-width: 640px) {
	#tpf-offer-popup {
		padding: 12px;
		align-items: center;
	}

	#tpf-offer-popup {
		--tpf-offer-media-vh: 40vh;
	}

	#tpf-offer-popup .tpf-offer-popup {
		max-width: min(
			360px,
			calc(var(--tpf-offer-media-vh) * var(--tpf-offer-ratio-mobile, var(--tpf-offer-ratio, 1.2)))
		);
		max-height: calc(100vh - 24px);
		border-radius: 8px;
	}

	#tpf-offer-popup .tpf-offer-popup__close {
		top: 8px;
		right: 8px;
		width: 34px;
		height: 34px;
		font-size: 22px;
		line-height: 32px;
	}

	#tpf-offer-popup .tpf-offer-popup__form,
	#tpf-offer-popup .tpf-offer-popup__success {
		padding: 14px 16px 18px;
	}

	#tpf-offer-popup .tpf-offer-popup__fields {
		grid-template-columns: 1fr;
		gap: 10px;
		margin-bottom: 12px;
	}

	#tpf-offer-popup .tpf-offer-popup__field input {
		min-height: 44px;
	}

	/* On a phone the form has the panel to itself, but not to spare: the
	   question gets two lines rather than the desktop height. */
	#tpf-offer-popup .tpf-offer-popup__field--question textarea {
		min-height: 44px;
		max-height: 96px;
	}

	#tpf-offer-popup .tpf-offer-popup__yes,
	#tpf-offer-popup .tpf-offer-popup__submit {
		min-height: 48px;
		font-size: 16px;
	}

	#tpf-offer-popup .tpf-offer-popup__choice {
		padding: 14px 16px 18px;
	}

	/* On a phone the form needs the whole panel. The artwork has already done its
	   job by this point, and leaving it on screen is what pushed the button below
	   the fold. Desktop keeps the picture: there is room for both. */
	#tpf-offer-popup[data-tpf-offer-step="form"] .tpf-offer-popup__media,
	#tpf-offer-popup[data-tpf-offer-state="submitted"] .tpf-offer-popup__media {
		display: none;
	}

	/* With the picture gone there is no artwork to size the panel from, and the
	   ratio cap would otherwise squeeze a portrait shaped popup down to about
	   270px and crush the fields. The form gets the full width instead. */
	#tpf-offer-popup[data-tpf-offer-step="form"] .tpf-offer-popup,
	#tpf-offer-popup[data-tpf-offer-state="submitted"] .tpf-offer-popup {
		max-width: 360px;
	}
}

/* Short screens, where the artwork has to give way to the form. Changing the one
   custom property narrows the panel and the picture together, so the shape is
   kept and the form stays in view without scrolling. */
@media (max-height: 700px) and (min-width: 641px) {
	#tpf-offer-popup {
		--tpf-offer-media-vh: 50vh;
	}
}

/* Desktop keeps the artwork on the form step, so the panel has to hold the
   picture AND the fields. At 62vh that is 558px of artwork plus a 337px form on
   a 900px screen: 895px against an 868px cap, which pushed the privacy line
   under the bottom edge. Cap the artwork by the room the form actually needs
   instead. Because the panel's width is derived from this same property the
   picture narrows with it, so it keeps its shape and is never cropped.

   The 400px allowance is a form carrying the optional question (three fields in
   a row, a textarea, the button and the privacy line). A form without the
   question needs about 320px, so this is a little conservative for those — the
   artwork comes out slightly smaller than it strictly had to, never clipped. */
@media (min-width: 641px) {
	#tpf-offer-popup[data-tpf-offer-step="form"] {
		--tpf-offer-media-vh: min(62vh, calc(100vh - 400px));
	}
}

/* --------------------------------------------------------------------------
 * The reminder tab
 *
 * Shown once the popup has been dismissed, so a visitor who closed it on
 * reflex still has a way back to the offer. Positioned from inline styles the
 * PHP writes, using the same side plus slot scheme as the FB floating button
 * plugins, and given the same z-index they use so the two sit as equals.
 * ----------------------------------------------------------------------- */

.tpf-offer-tab[hidden] {
	display: none !important;
}

.tpf-offer-tab {
	position: fixed;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 190px;
	padding: 12px 18px;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: #222222;
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: opacity 150ms ease;
}

.tpf-offer-tab:hover {
	opacity: 0.88;
}

.tpf-offer-tab:focus {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Duck behind any FB plugin modal, exactly as those plugins duck behind each
   other. The class list is theirs; ours is added here so a site running one of
   them alongside this popup behaves the way the family already does. */
body.fbwq-modal-open .tpf-offer-tab,
body.fbcn-modal-open .tpf-offer-tab,
body.fbmn-modal-open .tpf-offer-tab,
body.fbdn-modal-open .tpf-offer-tab,
body.fbr-modal-open .tpf-offer-tab {
	z-index: 9000;
}

/* While our own popup is open the tab would show through the dimmed backdrop. */
html.tpf-offer-popup-open .tpf-offer-tab {
	display: none;
}

@media (max-width: 640px) {
	.tpf-offer-tab {
		max-width: 150px;
		padding: 10px 14px;
		font-size: 14px;
	}
}