/*
 * Mobile sign-in form, page and window. Colours and corners from the theme's tokens when it has them (Parsa theme:
 * --ps-*), else neutral ones.
 */
.pl-form {
	--pl-primary: var(--ps-primary, #1f1f1f);
	--pl-primary-dark: var(--ps-primary-dark, #000);
	--pl-text: var(--ps-text, #555);
	--pl-heading: var(--ps-heading, #1f1f1f);
	--pl-muted: var(--ps-muted, #8a8a8a);
	--pl-border: var(--ps-border, #e5e5e5);
	--pl-radius: var(--ps-radius-sm, 8px);
	--pl-error: var(--ps-error, #b3261e);
	color: var(--pl-text);
	font-size: 14px;
	line-height: 1.8;
	text-align: start;
}
.pl-step[hidden] { display: none; }
/* Changing steps: the form eases to the new height, the new step slides in (forward / back) */
.pl-form.is-moving { overflow: clip; overflow-clip-margin: 6px; transition: height .34s cubic-bezier(.2,.8,.2,1); }
.pl-step--in { animation: pl-step-in .38s cubic-bezier(.2,.8,.2,1) both; }
.pl-step--back { animation: pl-step-back .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pl-step-in { from { opacity: 0; transform: translateX(-18px); } }
@keyframes pl-step-back { from { opacity: 0; transform: translateX(18px); } }
[dir="ltr"] .pl-step--in { animation-name: pl-step-back; }
[dir="ltr"] .pl-step--back { animation-name: pl-step-in; }
@media (prefers-reduced-motion: reduce) { .pl-step--in, .pl-step--back { animation: none; } }
.pl-title { margin: 0 0 6px; color: var(--pl-heading); font-size: 20px; font-weight: 700; line-height: 1.5; }
.pl-sub { margin: 0 0 20px; color: var(--pl-text); }
.pl-fields { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.pl-label { margin: 0; color: var(--pl-heading); font-size: 13px; font-weight: 700; }
.pl-form .pl-input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--pl-border);
	border-radius: var(--pl-radius);
	background: #fff;
	color: var(--pl-heading);
	font-size: 18px;
	letter-spacing: .06em;
	text-align: left;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.pl-form .pl-input::placeholder { color: #c2bcbc; letter-spacing: .06em; }
.pl-form .pl-input:focus { outline: none; border-color: var(--pl-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-primary) 14%, transparent); }
.pl-form .pl-input--code { font-size: 26px; font-weight: 700; letter-spacing: .5em; text-align: center; padding-inline: 16px 8px; }
.pl-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 4px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--pl-radius);
	background: var(--pl-primary);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
}
.pl-btn:hover { background: var(--pl-primary-dark); }
.pl-btn:disabled { cursor: wait; opacity: .85; }
.pl-btn.is-busy { color: transparent; }
.pl-btn.is-busy::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: pl-spin .7s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-error { margin: 0; color: var(--pl-error); font-size: 13px; }
.pl-error[hidden] { display: none; }
.pl-link { padding: 0; border: 0; background: none; color: var(--pl-primary); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pl-link[hidden] { display: none; }
.pl-phone { color: var(--pl-heading); unicode-bidi: isolate; }
.pl-resend { min-height: 26px; margin: 14px 0 0; color: var(--pl-muted); font-size: 13px; text-align: center; }
.pl-terms { margin: 16px 0 0; color: var(--pl-muted); font-size: 12px; text-align: center; }
.pl-terms a { color: var(--pl-text); text-decoration: underline; text-underline-offset: 3px; }

/* The account page for guests: the form on a card in the middle */
.pl-page { max-width: 440px; margin: 20px auto 40px; padding: 32px 28px; border: 1px solid var(--ps-border, #e5e5e5); border-radius: var(--ps-radius-lg, 16px); background: #fff; }
@media (max-width: 480px) { .pl-page { margin-block: 0 24px; padding: 24px 18px; } }

/* The plugin's own window (checkout links for guests, on themes without a login panel): fades and rises in */
.pl-modal { width: min(440px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 32px 28px 26px; border: 0; border-radius: var(--ps-radius-lg, 16px); background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.25); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.pl-modal.is-open { opacity: 1; transform: none; }
.pl-modal::backdrop { background: rgba(20,10,14,.55); opacity: 0; transition: opacity .3s ease; }
.pl-modal.is-open::backdrop { opacity: 1; }
.pl-modal__close { position: absolute; top: 10px; inset-inline-end: 10px; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: var(--ps-heading, #1f1f1f); font-size: 26px; line-height: 1; cursor: pointer; }
@media (max-width: 480px) {
	.pl-modal { margin: auto auto 0; width: 100%; max-width: none; border-radius: var(--ps-radius-lg, 16px) var(--ps-radius-lg, 16px) 0 0; padding: 28px 18px calc(22px + env(safe-area-inset-bottom)); opacity: 1; transform: translateY(100%); }
	.pl-modal.is-open { transform: none; }
}