/**
 * Seraj — shared console sign-in shell.
 *
 * Loaded on /partner/{login,register,forgot,reset}/, /manager/{login,forgot,reset}/
 * and /account/login/. Sits on top of partner-app.css.
 */

.sp-body--auth {
	--sa-primary: #2f5d3a;
	--sa-secondary: #2b5f7e;
	--sa-accent: #c07a3e;
	--sa-ink: #1c1a17;
	background: #f4f5f2;
	color: var(--sa-ink);
	min-height: 100vh;
}

.sp-body--auth .sp-auth {
	min-height: 100vh;
	display: block;
	padding: 0;
	place-items: initial;
}

.sa-auth__grid {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ---------------------------------------------------------------- Panel */

.sp-body--auth .sp-auth__panel {
	background: #fff;
	max-width: none;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	padding: clamp(1.75rem, 5vw, 4rem) clamp(1.25rem, 6vw, 4.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	animation: sa-auth-rise .38s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes sa-auth-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sp-body--auth .sp-auth__panel { animation: none; }
}

.sp-body--auth .sp-auth__panel > * { max-width: 26rem; width: 100%; }

.sp-body--auth .sp-auth__brand {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	text-decoration: none;
	margin: 0 0 2rem;
	padding: 0;
}
.sp-body--auth .sp-auth__brand .sp-brand__mark {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--sa-primary), var(--sa-secondary));
	color: #fff; font-weight: 700; font-size: 1.05rem;
}
.sa-auth__logo { max-height: 44px; width: auto; display: block; }
.sp-body--auth .sp-brand__text { display: grid; line-height: 1.15; font-weight: 700; }
.sp-body--auth .sp-brand__text small { font-weight: 500; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #857f74; }

.sp-body--auth h1,
.sp-body--auth .sp-auth__title {
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 0 0 .5rem;
}
.sp-body--auth .sp-muted,
.sp-body--auth .sp-auth__lede { color: #6b6459; font-size: .95rem; line-height: 1.55; margin: 0 0 1.6rem; }

/* ---------------------------------------------------------------- Fields */

.sp-body--auth .sp-form { gap: 1.05rem; max-width: 26rem; }
.sp-body--auth .sp-form label,
.sp-body--auth .sp-field { font-size: .82rem; font-weight: 600; gap: .35rem; }
.sp-body--auth .sp-form input[type=text],
.sp-body--auth .sp-form input[type=email],
.sp-body--auth .sp-form input[type=tel],
.sp-body--auth .sp-form input[type=password],
.sp-body--auth .sp-field input {
	width: 100%;
	padding: .8rem .95rem;
	font-size: 1rem;
	font-weight: 500;
	border: 1px solid #ded9cf;
	border-radius: 12px;
	background: #fbfaf7;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.sp-body--auth .sp-form input:focus,
.sp-body--auth .sp-field input:focus {
	outline: none;
	background: #fff;
	border-color: var(--sa-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-primary) 18%, transparent);
}
.sp-body--auth .sp-form input[readonly] { background: #f2f1ec; color: #6b6459; }
.sp-body--auth .sp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.sa-pw { position: relative; display: block; }
.sa-pw input { padding-right: 4.4rem !important; }
.sa-pw__toggle {
	position: absolute; right: .5rem; bottom: .42rem;
	border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .76rem; font-weight: 600;
	color: var(--sa-primary); padding: .35rem .5rem; border-radius: 8px;
}
.sa-pw__toggle:hover { background: color-mix(in srgb, var(--sa-primary) 10%, transparent); }
.sa-caps { font-size: .76rem; font-weight: 500; color: #a2560f; margin: .35rem 0 0; }
.sa-caps[hidden] { display: none; }

/* One-time code */
.sp-body--auth input[name="code"] {
	letter-spacing: .55em;
	text-align: center;
	font-size: 1.4rem !important;
	font-weight: 700;
	padding-left: .55em !important;
}

/* ---------------------------------------------------------------- Buttons */

.sp-body--auth .sp-btn {
	width: 100%;
	padding: .85rem 1.1rem;
	border-radius: 12px;
	font-weight: 650;
	font-size: .95rem;
	background: linear-gradient(135deg, var(--sa-primary), color-mix(in srgb, var(--sa-primary) 70%, var(--sa-secondary)));
	color: #fff;
	border: 0;
	cursor: pointer;
	transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
	box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--sa-primary) 90%, #000);
}
.sp-body--auth .sp-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sp-body--auth .sp-btn:active { transform: none; }
.sp-body--auth .sp-btn.is-loading { pointer-events: none; opacity: .78; }
.sp-body--auth .sp-btn.is-loading::before {
	content: ""; display: inline-block; vertical-align: -2px;
	width: 14px; height: 14px; margin-right: .5rem;
	border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
	border-radius: 50%; animation: sa-spin .7s linear infinite;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }

.sp-body--auth .sp-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .86rem; color: #6b6459; }
.sp-body--auth .sp-check input { width: auto; }

.sp-body--auth .sp-auth__links,
.sp-body--auth .sp-auth__alt {
	display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
	margin-top: 1.4rem; padding-top: 1.1rem;
	border-top: 1px solid #ecebe4; font-size: .88rem;
}
.sp-body--auth .sp-auth__links a,
.sp-body--auth .sp-auth__alt a { color: var(--sa-primary); text-decoration: none; font-weight: 600; }
.sp-body--auth .sp-auth__links a:hover,
.sp-body--auth .sp-auth__alt a:hover { text-decoration: underline; }

.sp-body--auth .sp-banner {
	border-radius: 12px; padding: .7rem .9rem; font-size: .87rem;
	margin: 0 0 1.1rem; display: flex; gap: .5rem; align-items: center;
}
.sp-body--auth .sp-banner--err { background: #fdeeea; color: #9a3418; }
.sp-body--auth .sp-banner--ok { background: #e9f5ec; color: #226138; }

.sp-body--auth .sp-hint { font-weight: 400; font-size: .78rem; color: #857f74; }
.sp-body--auth .seraj-hp-wrap,
.sp-body--auth .sp-hp { position: absolute !important; left: -9999px !important; }

/* ---------------------------------------------------------------- Aside */

.sa-auth__aside {
	position: relative;
	display: flex; align-items: flex-end;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	color: #fff;
	background: linear-gradient(150deg, var(--sa-primary), var(--sa-secondary) 62%, #16241c);
	overflow: hidden;
}
.sa-auth__aside::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--sa-accent) 55%, transparent), transparent 55%);
	opacity: .8;
}
.sa-auth__asideInner { position: relative; max-width: 30rem; }
.sa-auth__eyebrow {
	margin: 0 0 .8rem; font-size: .72rem; letter-spacing: .16em;
	text-transform: uppercase; color: rgba(255,255,255,.75); font-weight: 700;
}
.sa-auth__aside h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; margin: 0 0 .8rem; letter-spacing: -.02em; }
.sa-auth__lede { margin: 0 0 1.5rem; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.6; }
.sa-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.sa-auth__points li {
	position: relative; padding-left: 1.7rem;
	color: rgba(255,255,255,.92); font-size: .93rem; line-height: 1.45;
}
.sa-auth__points li::before {
	content: ""; position: absolute; left: 0; top: .28em;
	width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: rgba(255,255,255,.16);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.sa-auth__points li::after {
	content: ""; position: absolute; left: .3rem; top: .5em;
	width: .42rem; height: .22rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}
.sa-auth__legal { margin: 2.2rem 0 0; font-size: .76rem; color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------------- Mobile */

@media (max-width: 900px) {
	.sa-auth__grid { grid-template-columns: 1fr; }
	.sa-auth__aside { order: 2; min-height: auto; padding: 2rem 1.5rem 2.5rem; }
	.sp-body--auth .sp-auth__panel { order: 1; min-height: auto; padding: 2.25rem 1.35rem 2.5rem; }
	.sp-body--auth .sp-row { grid-template-columns: 1fr; }
	.sa-auth__points { gap: .5rem; }
}