/*
 * M-Pesa Express — checkout field, payment popup, status panel and waiting page.
 * Inherits the theme's fonts, colours and button styles.
 *
 * Responsive notes:
 * - Inputs are at least 16px so iOS Safari does not zoom in on focus.
 * - Buttons are at least 44px tall (touch target size).
 * - The popup becomes a bottom sheet on phones, respects iPhone safe areas,
 *   uses dynamic viewport units (dvh) so mobile address bars cannot hide it,
 *   and scrolls internally on short / landscape screens.
 * - Fallbacks are included for browsers without inset, gap, dvh or max().
 */

/* ------------------------------------------------------------------
 * Checkout phone field
 * ---------------------------------------------------------------- */
.smex-help,
.smex-status__help {
	display: block;
	margin-top: 0.35em;
	font-size: 0.875em;
	opacity: 0.85;
}

.smex-fields input[type="tel"],
.smex-blocks-input,
.smex-status__retry input {
	font-size: 16px;
	font-size: max( 16px, 1em );
}

.smex-blocks-fields { margin: 0; }
.smex-blocks-fields p { margin: 0 0 0.75em; }
.smex-blocks-label { display: block; margin-bottom: 0.35em; font-weight: 600; }
.smex-blocks-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 24em;
	min-height: 44px;
	padding: 0.6em 0.75em;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-family: inherit;
	background: transparent;
	color: inherit;
}

/* ------------------------------------------------------------------
 * Status panel (thank-you page, My Account, waiting page, popup)
 * ---------------------------------------------------------------- */
.smex-status {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 2em;
	padding: 1.25em 1.5em;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-left: 4px solid #2f8f3a;
	border-radius: 6px;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.smex-status--failed,
.smex-status--cancelled,
.smex-status--timed_out { border-left-color: #b32d2e; }
.smex-status--review { border-left-color: #dba617; }
.smex-status--paid { border-left-color: #2f8f3a; }

.smex-status__title { margin: 0 0 0.5em; font-size: 1.25em; line-height: 1.3; }
.smex-status__body { display: flex; align-items: flex-start; }
.smex-status__message { flex: 1 1 auto; min-width: 0; margin: 0; }
.smex-status__steps { margin: 1em 0 1em 1.25em; padding: 0; }
.smex-status__steps li { margin: 0 0 0.35em; padding-left: 0.15em; }
.smex-status__receipt { margin: 0.75em 0 0; font-weight: 600; }

.smex-status__spinner {
	display: none;
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin: 0.2em 0.75em 0 0;
	border: 2px solid rgba( 127, 127, 127, 0.3 );
	border-top-color: #2f8f3a;
	border-radius: 50%;
	animation: smex-spin 0.9s linear infinite;
}
.smex-status--pending .smex-status__spinner { display: inline-block; }
.smex-status--pending .smex-status__steps { display: block; }
.smex-status:not( .smex-status--pending ) .smex-status__steps { display: none; }

.smex-status__retry { margin: 1em 0; }
.smex-status__retry[hidden] { display: none; }
.smex-status__retry label { display: block; font-weight: 600; margin-bottom: 0.35em; }
.smex-status__retry input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 24em;
	min-height: 44px;
	margin-bottom: 0.25em;
}
.smex-status .button,
.smex-status button {
	box-sizing: border-box;
	min-height: 44px;
	max-width: 100%;
	white-space: normal;
	line-height: 1.3;
	touch-action: manipulation;
}
.smex-status__retry button { display: block; margin-top: 0.75em; }
.smex-status__refresh { margin-top: 0.5em; }
.smex-status button[disabled] { opacity: 0.6; cursor: progress; }

@media ( max-width: 480px ) {
	.smex-status { padding: 1em; }
	.smex-status__retry input,
	.smex-status__retry button,
	.smex-status__refresh { width: 100%; max-width: none; }
}

/* The checkout payment popup is styled by assets/js/checkout-modal.js, which injects
 * its own scoped stylesheet so optimisation plugins cannot strip it. */

@media ( prefers-reduced-motion: reduce ) {
	.smex-status__spinner { animation-duration: 3s; }
}

/* ------------------------------------------------------------------
 * Stand-alone "Complete your M-Pesa payment" page (fallback / order-pay).
 * ---------------------------------------------------------------- */
.smex-wait-page {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: #f4f5f7;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.smex-wait-page *,
.smex-wait-page *::before,
.smex-wait-page *::after { box-sizing: border-box; }
.smex-wait {
	width: 100%;
	max-width: 34rem;
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
	padding-left: max( 1rem, env( safe-area-inset-left, 0px ) );
	padding-right: max( 1rem, env( safe-area-inset-right, 0px ) );
	padding-bottom: calc( 3rem + env( safe-area-inset-bottom, 0px ) );
}
.smex-wait__store { margin: 0 0 0.25rem; font-weight: 600; opacity: 0.75; }
.smex-wait__title { margin: 0 0 0.25rem; font-size: 1.5rem; font-size: clamp( 1.25rem, 5vw, 1.6rem ); line-height: 1.25; }
.smex-wait__summary { margin: 0 0 1.25rem; opacity: 0.85; }
.smex-wait .smex-status { background: #fff; margin-bottom: 1.25rem; }
.smex-wait__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	font-size: 0.95em;
}
.smex-wait__links span { display: none; }
.smex-wait__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0 0.75em;
	padding: 0 0.25em;
	color: inherit;
}
.smex-wait-page .button {
	padding: 0.6em 1.1em;
	border: 0;
	border-radius: 4px;
	background: #2f8f3a;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.smex-wait-page .smex-status__refresh { background: transparent; color: inherit; border: 1px solid currentColor; }
.smex-wait-page .smex-status__retry input { padding: 0.55em 0.7em; border: 1px solid #8c8f94; border-radius: 4px; font-family: inherit; }

@media ( max-width: 480px ) {
	.smex-wait { padding-top: 1.25rem; }
}

@media ( prefers-color-scheme: dark ) {
	.smex-wait-page { background: #16181b; color: #e6e7e8; }
	.smex-wait .smex-status { background: #1f2226; border-color: rgba( 255, 255, 255, 0.15 ); }
	.smex-wait-page .smex-status__retry input { background: #16181b; color: inherit; border-color: #5c6066; }
}

@keyframes smex-spin { to { transform: rotate( 360deg ); } }