/**
 * USSD waiting overlay.
 *
 * Shown over the checkout while the customer approves the payment on their
 * phone. The countdown is the point: an unexplained wait reads as a frozen
 * page, whereas a visible timer reads as a process with an end.
 */

/* Declared on the root so the checkout notices can use them too: they live
   outside the overlay, elsewhere in the page. */
:root {
	--ppw-accent: #0f4c81;
	--ppw-green: #1a7f5a;
	--ppw-text: #1d2327;
	--ppw-dim: #646970;

	/* No webfont is fetched from here: a checkout must not depend on a third
	   party being reachable, and requesting one would send the customer's IP
	   to that host. These are used when the theme already provides them, and
	   fall back to stacks with the same proportions when it does not. */
	--ppw-font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ppw-font-clock: "Bebas Neue", "Bebas", "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
}

.phenomain-pay-wait {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(17, 24, 33, 0.55);
	backdrop-filter: blur(2px);
	animation: phenomain-pay-wait-in 0.18s ease;
}

@keyframes phenomain-pay-wait-in {
	from {
		opacity: 0;
	}
}

.phenomain-pay-wait__panel {
	width: 100%;
	max-width: 400px;
	padding: 32px 28px 26px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	font-family: var(--ppw-font);
	text-align: center;
}

.phenomain-pay-wait__title {
	margin: 0 0 9px;
	font-family: var(--ppw-font);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ppw-text);
}

.phenomain-pay-wait__subtitle {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ppw-dim);
}

/* ------------------------------------------------------------------ dial */

.phenomain-pay-wait__dial {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto 20px;
}

.phenomain-pay-wait__dial svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

/* The track has to stay clearly visible behind the progress arc: with both
   the same weight and a pale grey, a nearly full ring looks like a plain
   circle and the countdown loses its only visual cue. */
.phenomain-pay-wait__track {
	fill: none;
	stroke: #dfe4ea;
	stroke-width: 8;
}

.phenomain-pay-wait__progress {
	fill: none;
	stroke: var(--ppw-accent);
	stroke-width: 12;
	stroke-linecap: round;
	transition: stroke-dashoffset 1s linear;
}

.phenomain-pay-wait__count {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ppw-font-clock);
	font-size: 42px;
	font-weight: 400;
	letter-spacing: 0.02em;
	/* Fixed-width digits: without them the ring's centre jitters every second
	   as the numerals change width. */
	font-variant-numeric: tabular-nums;
	color: var(--ppw-accent);
}

/* Confirmed: the ring completes and turns green before the redirect. */
.phenomain-pay-wait.is-confirmed .phenomain-pay-wait__progress {
	stroke: var(--ppw-green);
	stroke-dashoffset: 0 !important;
}

.phenomain-pay-wait.is-confirmed .phenomain-pay-wait__count {
	color: var(--ppw-green);
}

/* ------------------------------------------------------------------ text */

.phenomain-pay-wait__hint {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ppw-dim);
}

/* Flat: no border of its own, and no focus ring stacked on top of one — that
   combination is what read as a double outline. */
.phenomain-pay-wait__cancel {
	display: inline-block;
	padding: 10px 20px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--ppw-dim);
	font-family: var(--ppw-font);
	font-size: 14.5px;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
	-webkit-appearance: none;
	appearance: none;
}

.phenomain-pay-wait__cancel:hover {
	background: #f0f2f4;
	color: var(--ppw-text);
}

/* A pointer click must not leave a ring behind; keyboard focus still gets one. */
.phenomain-pay-wait__cancel:focus {
	outline: none;
	background: #f0f2f4;
	color: var(--ppw-text);
}

.phenomain-pay-wait__cancel:focus-visible {
	outline: 2px solid var(--ppw-accent);
	outline-offset: 2px;
}

.phenomain-pay-wait__cancel:active {
	background: #e6e9ec;
}

/* -------------------------------------------------- notices in the form */

/* One appearance for every message on the checkout, whether raised by this
   plugin or by WooCommerce. Two visual languages on the same form makes the
   page look broken and, worse, makes contradictory messages look equally
   authoritative. */
.phenomain-pay-checkout-notice,
.woocommerce-error.phenomain-pay-styled,
.woocommerce-message.phenomain-pay-styled,
.woocommerce-info.phenomain-pay-styled {
	position: relative;
	margin: 0 0 20px;
	padding: 14px 16px 14px 46px;
	border: 1px solid #f2cdcf;
	border-left-width: 4px;
	border-radius: 6px;
	background: #fdefef;
	color: #1d2327;
	font-family: var(--ppw-font, inherit);
	font-size: 14.5px;
	line-height: 1.5;
	list-style: none;
}

/* WooCommerce renders its errors as a list; the bullets and indent have to go
   for the icon to sit where it should. */
.woocommerce-error.phenomain-pay-styled li,
.woocommerce-message.phenomain-pay-styled li,
.woocommerce-info.phenomain-pay-styled li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-error.phenomain-pay-styled li + li,
.woocommerce-message.phenomain-pay-styled li + li {
	margin-top: 6px;
}

.woocommerce-error.phenomain-pay-styled::before,
.woocommerce-message.phenomain-pay-styled::before,
.woocommerce-info.phenomain-pay-styled::before,
.phenomain-pay-checkout-notice::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 16px;
	width: 18px;
	height: 18px;
	background-color: #a4262c;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm5 13.6L15.6 17 12 13.4 8.4 17 7 15.6 10.6 12 7 8.4 8.4 7 12 10.6 15.6 7 17 8.4 13.4 12 17 15.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm5 13.6L15.6 17 12 13.4 8.4 17 7 15.6 10.6 12 7 8.4 8.4 7 12 10.6 15.6 7 17 8.4 13.4 12 17 15.6z'/%3E%3C/svg%3E");
}

/* An expired countdown or an abandoned wait is not a failure: the payment may
   still land, so it must not be dressed in red. */
.phenomain-pay-checkout-notice.is-timeout,
.phenomain-pay-checkout-notice.is-abandoned,
.woocommerce-info.phenomain-pay-styled {
	border-color: #f0dcb4;
	background: #fdf6e9;
}

.phenomain-pay-checkout-notice.is-timeout::before,
.phenomain-pay-checkout-notice.is-abandoned::before,
.woocommerce-info.phenomain-pay-styled::before {
	background-color: #8a5a00;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.woocommerce-message.phenomain-pay-styled {
	border-color: #bfe0d1;
	background: #eaf5f0;
}

.woocommerce-message.phenomain-pay-styled::before {
	background-color: #1a7f5a;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 15-5-5 1.4-1.4L11 14.2l5.6-5.6L18 10l-7 7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 15-5-5 1.4-1.4L11 14.2l5.6-5.6L18 10l-7 7z'/%3E%3C/svg%3E");
}

/* Themes routinely add their own icon; two would be one too many. */
.woocommerce-error.phenomain-pay-styled::after,
.woocommerce-message.phenomain-pay-styled::after,
.woocommerce-info.phenomain-pay-styled::after {
	content: none;
}

.phenomain-pay-checkout-notice a,
.woocommerce-error.phenomain-pay-styled a,
.woocommerce-message.phenomain-pay-styled a,
.woocommerce-info.phenomain-pay-styled a {
	color: inherit;
	text-decoration: underline;
}

@media screen and (max-width: 480px) {
	.phenomain-pay-wait__panel {
		padding: 24px 18px 20px;
	}

	.phenomain-pay-wait__dial {
		width: 168px;
		height: 168px;
	}

	.phenomain-pay-wait__count {
		font-size: 36px;
	}

	.phenomain-pay-wait__title {
		font-size: 20px;
	}

	.phenomain-pay-wait__subtitle,
	.phenomain-pay-wait__hint {
		font-size: 14.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.phenomain-pay-wait {
		animation: none;
	}

	.phenomain-pay-wait__progress {
		transition: none;
	}
}

/* The panel takes focus when the overlay opens so that Tab reaches the button;
   it must not show a ring of its own for that. */
.phenomain-pay-wait__panel:focus {
	outline: none;
}

/* The retry offered after a transient failure. Placed inside the notice so it
   reads as part of the same message rather than a separate call to action. */
.phenomain-pay-retry {
	display: inline-block;
	margin: 10px 0 0;
	padding: 8px 16px;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: #a4262c;
	font-family: var(--ppw-font, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.phenomain-pay-retry:hover:not(:disabled) {
	background: #a4262c;
	color: #fff;
}

.phenomain-pay-retry:disabled {
	opacity: 0.55;
	cursor: default;
}

.phenomain-pay-checkout-notice > span {
	display: block;
}