/* Nexus's own #main-body rule (theme.min.css) adds 20px top/bottom
	   padding and a background color meant to frame content between the
	   header/footer we've removed on this page — leaves a visible gap and
	   color mismatch above and below our full-height block otherwise. */
	body.niva-page-auth #main-body {
		padding: 0;
		background: none;
		min-height: 0;
	}

	/* Login page — split screen, matching the brief taken from panel.limoo.host
	   and hub.iranserver.com's login pages: a branded panel on one side, a
	   plain functional form on the other. Full-bleed like the homepage hero
	   sections (100vw trick), since the login page has no sidebar to share
	   space with. */
	.niva-login {
		/* Full-bleed breakout via "left:50%; margin:-50vw": for a
		   "position:relative" element, percentage "left" always resolves
		   against its immediate parent's CONTENT box — regardless of that
		   parent's own "position" — not the viewport. That parent here is
		   ".primary-content", which normally carries side padding and (on
		   clientregister.tpl specifically, since the sidebar has items on
		   that page but not on login.tpl) is only 8/12 of the row's width
		   instead of the full container — "left:50%" then centers against
		   that narrower, offset box instead of the true viewport, throwing
		   the split off. Neutralizing the whole ".container/.row/.primary-
		   content" padding-and-width chain below (auth pages only) makes
		   that parent's content box equal the true viewport width again,
		   which is what this trick actually needs to center correctly. */
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		min-height: 100vh;
		direction: rtl;
	}
	body.niva-page-auth #main-body .container {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
	body.niva-page-auth #main-body .row {
		margin-left: 0;
		margin-right: 0;
	}
	body.niva-page-auth .primary-content {
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
	}
	.niva-login-illustration {
		flex: 1 1 22rem;
		min-width: 0;
		background: var(--primary);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 2.5rem 2rem;
		position: relative;
		overflow: hidden;
	}
	.niva-login-logo {
		display: block;
		width: 100%;
		margin-bottom: 2.5rem;
		text-align: center;
	}
	.niva-login-logo img {
		display: inline-block;
	}
	.niva-login-illustration-content {
		max-width: 26rem;
		width: 100%;
		margin: auto 0;
		position: relative;
		z-index: 1;
	}
	.niva-login-help {
		width: 100%;
		max-width: 26rem;
		display: flex;
		align-items: center;
		gap: .875rem;
		margin-top: 2.5rem;
		position: relative;
		z-index: 1;
		background: rgba(8, 17, 27, .06);
		border-radius: .75rem;
		padding: 1rem 1.25rem;
	}
	.niva-login-help-icon {
		flex-shrink: 0;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;
		background: #08111b;
		color: var(--primary);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.niva-login-help p {
		margin: 0 0 .25rem;
		font-size: .8125rem;
		font-weight: 700;
		color: #08111b;
		white-space: nowrap;
	}
	.niva-login-help-phone {
		font-size: .9375rem;
		font-weight: 800;
		color: #08111b;
		text-decoration: none;
		unicode-bidi: plaintext;
	}
	.niva-login-help-phone:hover {
		text-decoration: underline;
	}
	.niva-login-title-row {
		display: flex;
		align-items: center;
		gap: .875rem;
		margin-bottom: .75rem;
	}
	.niva-login-title-row h2 {
		margin: 0;
	}
	.niva-login-badge {
		flex-shrink: 0;
		width: 3.25rem;
		height: 3.25rem;
		border-radius: 50%;
		background: #08111b;
		color: var(--primary);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.niva-login-illustration-content h2 {
		font-size: 2.25rem;
		font-weight: 800;
		color: #08111b;
		margin: 0 0 .75rem;
		line-height: 1.4;
	}
	.niva-login-illustration-content p {
		font-size: 1rem;
		color: #08111b;
		opacity: .8;
		margin: 0 0 2.75rem;
		line-height: 1.8;
	}
	.niva-login-points {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.niva-login-points li {
		display: flex;
		align-items: center;
		gap: .75rem;
		font-weight: 700;
		font-size: .9375rem;
		color: #08111b;
		margin-bottom: 1rem;
	}
	.niva-login-points li:last-child {
		margin-bottom: 0;
	}
	.niva-login-points li span {
		flex-shrink: 0;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 50%;
		background: #08111b;
		color: var(--primary);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* Decorative dots, purely CSS — echoes the badge/checks pattern already
	   used on the homepage hero instead of copying a specific illustration. */
	.niva-login-illustration::before,
	.niva-login-illustration::after {
		content: '';
		position: absolute;
		border-radius: 50%;
		background: rgba(8, 17, 27, .06);
	}
	.niva-login-illustration::before {
		width: 16rem;
		height: 16rem;
		top: -6rem;
		left: -6rem;
	}
	.niva-login-illustration::after {
		width: 10rem;
		height: 10rem;
		bottom: -4rem;
		right: -3rem;
	}

	.niva-login-form-panel {
		flex: 1 1 22rem;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding: 3rem 2rem;
	}
	.niva-login-form-panel > * {
		width: 100%;
		max-width: 24rem;
	}
	.niva-login-form {
		width: 100%;
		max-width: 24rem;
	}
	.niva-login-form-panel h1 {
		font-size: 1.5rem;
		font-weight: 800;
		color: #08111b;
		margin: 0 0 .5rem;
	}
	.niva-login-form-sub {
		font-size: .9375rem;
		color: var(--black-30);
		margin: 0 0 2rem;
	}
	/* Login flash message (wrong password, banned IP, etc.) — replaces
	   Bootstrap's harsh solid-red .alert-danger with the softer light-pink
	   card + icon treatment hub.iranserver.com uses. */
	.niva-login-alert {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .625rem;
		border-radius: .625rem;
		padding: .875rem 1rem;
		margin-bottom: 1.5rem;
		font-size: .875rem;
		font-weight: 700;
		line-height: 1.6;
	}
	.niva-login-alert svg {
		flex-shrink: 0;
	}
	/* $errormessage can be several bare "<li>" siblings with no wrapping
	   "<ul>" (e.g. failing more than one registration rule at once) — as
	   plain flex items they'd otherwise sit side by side instead of one
	   error per line, so each is forced to take the full row width. */
	.niva-login-alert > li,
	.niva-login-alert > ul {
		flex: 1 0 100%;
	}
	.niva-login-alert > li:not(:first-child) {
		margin-top: .375rem;
	}
	/* $errormessage can be a raw "<ul><li>...</li></ul>" list (multiple
	   validation errors) — its stock LTR "padding-left" indents bullets
	   away from the wrong edge in this RTL box. */
	.niva-login-alert ul {
		margin: 0;
		padding-left: 0;
		padding-right: 1.25rem;
	}
	/* Some validation messages (e.g. password-strength) come back as a
	   bare "<li>" with no wrapping "<ul>" at all — still renders with a
	   default bullet marker flush against the box edge with no "ul" to
	   catch it. */
	.niva-login-alert > li {
		margin-right: 1.25rem;
		list-style-position: outside;
	}
	/* Custom fields (e.g. "شماره موبایل"/"کد ملی") render WHMCS's own
	   "<input class="form-control">" markup, unlike this form's other
	   fields (firstname/email/etc., plain unclassed <input>s) — so the
	   site-wide baseline "#main-body .form-control" border/radius landed
	   on the INNER input too, doubled up with the ".input-group-merge"
	   wrapper's own border/radius that's meant to be the only visible
	   one for this "icon + merged pill" field style. */
	.niva-login-field .input-group-merge .form-control {
		border: none !important;
		border-radius: 0 !important;
	}
	.niva-login-alert-danger {
		background: var(--danger-90);
		color: var(--danger);
	}
	.niva-login-alert-success {
		background: #e7f7ee;
		color: #1a9c53;
	}
	.niva-login-alert-warning {
		background: #fdf3d9;
		color: #a06a00;
	}
	.niva-login-alert-info {
		background: var(--primary-90, #fef6d9);
		color: #08111b;
	}

	.niva-login-field {
		margin-bottom: 1.25rem;
	}
	/* Client-side required-field state — red border on the field + a message
	   below it, matching hub.iranserver.com's validation style (no tooltip). */
	.niva-login-field.niva-field-invalid .input-group {
		border-color: var(--danger);
	}
	.niva-login-field-error {
		display: none;
		color: var(--danger);
		font-size: .8125rem;
		font-weight: 700;
		margin: .5rem 0 0;
	}
	.niva-login-field.niva-field-invalid .niva-login-field-error {
		display: block;
	}
	.niva-login-field label {
		display: block;
		font-size: .875rem;
		font-weight: 700;
		color: #08111b;
		margin-bottom: .5rem;
	}
	.niva-login-field .input-group {
		display: flex;
		align-items: center;
		gap: .625rem;
		border: 1px solid var(--black-90);
		border-radius: .625rem;
		padding: 0 .875rem;
		transition: border-color .15s ease;
	}
	.niva-login-field .input-group:focus-within {
		border-color: var(--primary);
	}
	.niva-login-field .input-group-prepend .icon,
	.niva-login-field .input-group-append .icon {
		color: var(--black-50);
		flex-shrink: 0;
	}
	.niva-login-field .input-group-append button {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		display: flex;
	}
	.niva-login-field input {
		flex: 1;
		min-width: 0;
		border: none;
		outline: none;
		background: transparent;
		padding: .75rem 0;
		font-size: .9375rem;
		font-family: inherit;
		direction: ltr;
		text-align: right;
	}
	/* Browser-saved-password autofill forces its own yellow background on
	   the <input> (Chrome/Firefox default), ignoring our own "background:
	   transparent" above — the box-shadow inset trick is the only way to
	   override it, since autofill styling can't be reached with a normal
	   background-color rule. */
	.niva-login-field input:-webkit-autofill,
	.niva-login-field input:-webkit-autofill:hover,
	.niva-login-field input:-webkit-autofill:focus {
		-webkit-text-fill-color: #08111b;
		-webkit-box-shadow: 0 0 0 1000px #fff inset;
		box-shadow: 0 0 0 1000px #fff inset;
		transition: background-color 9999s ease-in-out 0s;
	}
	/* Login-page captcha — reuses the same field look as the email/password
	   inputs (border, radius, focus color) instead of Nexus's generic
	   Bootstrap grid markup, matching how hub.iranserver.com presents its
	   verification-code field: label above, code image + input in one box. */
	.niva-login-captcha .input-group-append img {
		display: block;
		height: 1.625rem;
		width: auto;
		border-radius: .25rem;
		flex-shrink: 0;
	}
	.niva-login-captcha input {
		direction: ltr;
		text-align: left;
		letter-spacing: .2em;
	}
	/* Plain field (no prepend icon) — same look as the icon input-groups,
	   used on the register page for fields we don't have a matching icon
	   for (address, city, country, ...). */
	.niva-login-field input.niva-plain-input,
	.niva-login-field select.niva-plain-input {
		width: 100%;
		height: auto;
		line-height: 1.6;
		border: 1px solid var(--black-90);
		border-radius: .625rem;
		padding: .75rem .875rem;
		font-size: .9375rem;
		font-family: inherit;
		background-color: transparent;
		transition: border-color .15s ease;
	}
	/* Most browsers honor font-family on the popup option list too (not just
	   the closed select), so the dropdown items match Dana instead of
	   falling back to the OS default font. */
	.niva-login-field select option {
		font-family: inherit;
	}
	.niva-login-field select.niva-plain-input,
	.niva-login-field select.form-control {
		appearance: none;
		padding-left: 2.25rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23767E8C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: left .875rem center;
	}
	/* WHMCS-generated markup (custom fields, product options) ships its own
	   .form-control class we don't otherwise use — give it the same look as
	   .niva-plain-input instead of styling every such field by hand.
	   height/line-height are reset explicitly: theme.css's own .form-control
	   sets a fixed height calc()'d for its own font metrics, which clips the
	   taller line-height of Dana/Persian text in Firefox (fine in Chrome's
	   more forgiving text layout, but visibly cut off in Firefox). */
	.niva-login-field input.form-control,
	.niva-login-field select.form-control,
	.niva-login-field textarea.form-control {
		width: 100%;
		height: auto;
		line-height: 1.6;
		border: 1px solid var(--black-90);
		border-radius: .625rem;
		padding: .75rem .875rem;
		font-size: .9375rem;
		font-family: inherit;
		background-color: transparent;
		transition: border-color .15s ease;
	}
	.niva-login-field input.form-control:focus,
	.niva-login-field select.form-control:focus,
	.niva-login-field textarea.form-control:focus {
		outline: none;
		border-color: var(--primary);
	}
	/* When a .form-control field is wrapped in an icon .input-group (e.g. the
	   کد ملی custom field), the group itself already draws the border/radius
	   — the input inside needs to go back to being a plain borderless flex
	   item instead of drawing its own nested box, or you get a boxed input
	   inside another boxed container (mismatched height, doubled border). */
	.niva-login-field .input-group input.form-control {
		width: auto;
		flex: 1;
		min-width: 0;
		height: auto;
		border: none;
		border-radius: 0;
		padding: .75rem 0;
		background-color: transparent;
	}
	.niva-login-field input.niva-plain-input:focus,
	.niva-login-field select.niva-plain-input:focus {
		outline: none;
		border-color: var(--primary);
	}
	.niva-login-field-row {
		display: flex;
		gap: .75rem;
	}
	.niva-login-field-row .niva-login-field {
		flex: 1;
		min-width: 0;
	}
	/* Custom-styled <select> replacement (register page) — real border-radius,
	   brand colors and a checkmark on the selected row, none of which a
	   native OS dropdown popup can ever be made to render. */
	.niva-custom-select {
		position: relative;
	}
	.niva-custom-select-native {
		display: none !important;
	}
	.niva-custom-select-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .5rem;
		width: 100%;
		border: 1px solid var(--black-90);
		border-radius: .625rem;
		padding: .75rem .875rem;
		background: transparent;
		font-family: inherit;
		font-size: .9375rem;
		color: #08111b;
		text-align: right;
		cursor: pointer;
		transition: border-color .15s ease;
	}
	.niva-custom-select-trigger:focus {
		outline: none;
	}
	.niva-custom-select.is-open .niva-custom-select-trigger {
		border-color: var(--primary);
	}
	.niva-custom-select-trigger svg {
		flex-shrink: 0;
		color: var(--black-50);
		transition: transform .15s ease;
	}
	.niva-custom-select.is-open .niva-custom-select-trigger svg {
		transform: rotate(180deg);
	}
	.niva-custom-select-list {
		position: absolute;
		z-index: 20;
		top: calc(100% + .5rem);
		right: 0;
		left: 0;
		margin: 0;
		padding: .375rem;
		list-style: none;
		background: #fff;
		border: 1px solid var(--black-90);
		border-radius: .625rem;
		box-shadow: 0 12px 30px -10px rgba(8, 17, 27, .25);
		max-height: 14rem;
		overflow-y: auto;
	}
	.niva-custom-select-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .5rem;
		padding: .625rem .75rem;
		border-radius: .5rem;
		font-size: .9375rem;
		color: #08111b;
		cursor: pointer;
	}
	.niva-custom-select-option:hover {
		background: var(--primary-90, #fef6d9);
	}
	.niva-custom-select-option.is-selected {
		background: var(--primary);
		font-weight: 700;
	}
	.niva-custom-select-check {
		flex-shrink: 0;
		opacity: 0;
	}
	.niva-custom-select-option.is-selected .niva-custom-select-check {
		opacity: 1;
	}

	.niva-login-section-title {
		font-size: .8125rem;
		font-weight: 800;
		color: var(--black-30);
		text-transform: uppercase;
		letter-spacing: .03em;
		margin: 2rem 0 1rem;
	}
	.niva-login-section-title:first-child {
		margin-top: 0;
	}
	.niva-login-checkbox-row {
		display: flex;
		align-items: flex-start;
		gap: .625rem;
		margin-bottom: 1.5rem;
		font-size: .8125rem;
		color: var(--black-30);
	}
	.niva-login-checkbox-row a {
		color: #08111b;
		font-weight: 700;
		text-decoration: none;
	}
	.niva-login-checkbox-row a:hover {
		color: #B8860B;
	}
	.niva-login-help-text {
		font-size: .75rem;
		color: var(--black-50);
		margin: .5rem 0 0;
	}

	.niva-login-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: .5rem;
		margin-bottom: 1.75rem;
		font-size: .8125rem;
	}
	.niva-login-remember {
		display: flex;
		align-items: center;
		gap: .5rem;
		color: var(--black-30);
		cursor: pointer;
	}
	/* Custom checkbox — the browser's native checkbox can't be restyled or
	   given a transition, so it's kept for real functionality/a11y but made
	   invisible; a styled box + SVG check on top do the visuals, cross-fading
	   in via opacity+scale while the box tints from white to yellow. */
	.niva-checkbox {
		position: relative;
		display: inline-flex;
		width: 1.25rem;
		height: 1.25rem;
		flex-shrink: 0;
	}
	.niva-checkbox input {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
		cursor: pointer;
		z-index: 1;
	}
	.niva-checkbox-box {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: .375rem;
		border: 1.5px solid var(--black-90);
		background: #fff;
		transition: background-color .25s ease, border-color .25s ease, transform .15s ease;
	}
	.niva-checkbox-icon {
		color: #08111b;
		opacity: 0;
		transform: scale(.4);
		transition: opacity .25s ease, transform .25s ease;
	}
	.niva-checkbox input:checked ~ .niva-checkbox-box {
		background: var(--primary);
		border-color: var(--primary);
	}
	.niva-checkbox input:checked ~ .niva-checkbox-box .niva-checkbox-icon {
		opacity: 1;
		transform: scale(1);
	}
	.niva-checkbox input:focus-visible ~ .niva-checkbox-box {
		box-shadow: 0 0 0 3px rgba(254, 198, 0, .35);
	}
	.niva-checkbox:active .niva-checkbox-box {
		transform: scale(.88);
	}
	.niva-login-forgot {
		color: var(--black-30);
		text-decoration: none;
	}
	.niva-login-forgot:hover {
		color: #B8860B;
	}
	.niva-login-forgot[disabled],
	.niva-login-forgot.niva-disabled {
		pointer-events: none;
		color: var(--black-70);
	}
	#nivaSmsMsg.niva-sms-msg {
		display: none;
		border-radius: .625rem;
		padding: .75rem 1rem;
		font-size: .8125rem;
		font-weight: 700;
		margin: 0 0 1.25rem;
		text-align: right;
	}
	#nivaSmsMsg.niva-sms-msg-success {
		display: block;
		background: rgba(0, 202, 73, .1);
		border: 1px solid rgba(0, 202, 73, .35);
		color: #1a9c53;
	}
	#nivaSmsMsg.niva-sms-msg-error {
		display: block;
		background: rgba(223, 31, 31, .08);
		border: 1px solid rgba(223, 31, 31, .3);
		color: var(--danger);
	}
	/* The reCAPTCHA checkbox (includes/captcha.tpl's own markup on the login
	   page, "#google-recaptcha-domainchecker") is just a bare div with no
	   layout of its own — Google's widget script renders a fixed-width
	   ~304px iframe inside it that then sits flush against the form's left
	   edge in normal block flow, instead of centered like the fields above
	   and below it. */
	#google-recaptcha-domainchecker {
		display: flex;
		justify-content: center;
		margin-bottom: 1.5rem;
	}
	.niva-login-actions {
		display: flex;
		align-items: center;
		gap: .75rem;
		margin-bottom: 2rem;
	}
	.niva-login-submit {
		flex: 1;
		background: #08111b;
		color: var(--primary);
		border: none;
		border-radius: .625rem;
		padding: .875rem 1.5rem;
		font-weight: 700;
		font-size: .9375rem;
		cursor: pointer;
	}
	.niva-login-submit:hover {
		background: var(--black-10);
	}
	/* Disabled state (shown while the OTP send/verify request is pending)
	   previously looked byte-for-byte identical to the normal enabled
	   button — with no other loading indicator either, a click that takes
	   a couple of seconds to resolve (SSO token creation is not instant)
	   looked like it hadn't registered at all, so people clicked repeatedly. */
	.niva-login-submit:disabled {
		opacity: .65;
		cursor: not-allowed;
	}
	.niva-login-submit .fa-spinner {
		margin-left: .5rem;
	}
	/* SMS login — UI placeholder only. WHMCS has no built-in SMS-based login;
	   this button is intentionally non-functional (href="#") until a custom
	   WHMCS addon module is built (OTP send + verify via an SMS gateway,
	   configured with a real API key from the module's admin settings page).
	   Requested provider to integrate later: "Charak"/"Apyar" SMS login
	   system (exact service TBC) — do not wire this button up to anything
	   until that module exists. */
	.niva-login-sms {
		flex: 1;
		background: #fff;
		color: #08111b;
		border: 1px solid var(--black-90);
		border-radius: .625rem;
		padding: .875rem 1.5rem;
		font-weight: 700;
		font-size: .9375rem;
		cursor: pointer;
		text-align: center;
		text-decoration: none;
		display: block;
	}
	.niva-login-sms:hover {
		border-color: var(--black-50);
		color: #08111b;
	}
	.niva-login-register {
		text-align: center;
		font-size: .875rem;
		color: var(--black-30);
		margin: 0;
	}
	.niva-login-register a {
		color: #08111b;
		font-weight: 700;
		text-decoration: none;
	}
	.niva-login-register a:hover {
		color: #B8860B;
	}
	.niva-login-divider {
		display: flex;
		align-items: center;
		gap: 0;
		margin: 1.5rem 0;
		color: var(--black-50);
		font-size: .8125rem;
	}
	.niva-login-divider::before,
	.niva-login-divider::after {
		content: '';
		flex: 1;
		height: 1px;
		background: var(--black-90);
	}
	.niva-login-divider span {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 999px;
		background: var(--black-95, #f0f0f0);
	}
	.niva-google-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .625rem;
		width: 100%;
		background: #fff;
		border: 1px solid var(--black-90);
		border-radius: .625rem;
		padding: .8125rem 1.5rem;
		font-family: inherit;
		font-weight: 700;
		font-size: .9375rem;
		color: #08111b;
		text-decoration: none;
		cursor: pointer;
	}
	.niva-google-btn:hover {
		border-color: var(--black-50);
		color: #08111b;
	}
	@media (max-width: 61.9375rem) {
		.niva-login-illustration {
			display: none;
		}
	}

	/* Common laptop screens (1366x768 and similar — browser chrome eats
	   ~100-150px, leaving well under 700px of real height) render this
	   panel's content taller than the viewport. "margin: auto 0" still
	   centers it correctly, but only within its own (now taller-than-
	   the-screen) box, so the whole ".niva-login" block grows past 100vh
	   and needs scrolling — which reads as "stuck at the top" rather than
	   centered, since nothing below the fold is visible without scrolling.
	   Tightening the vertical rhythm here keeps everything on one screen
	   on short-but-wide viewports instead. */
	@media (min-width: 62rem) and (max-height: 50rem) {
		.niva-login-logo {
			margin-bottom: 1.25rem;
		}
		.niva-login-illustration-content h2 {
			font-size: 1.75rem;
			margin-bottom: .5rem;
		}
		.niva-login-illustration-content p {
			margin-bottom: 1.5rem;
			line-height: 1.6;
		}
		.niva-login-points li {
			margin-bottom: .625rem;
		}
		.niva-login-help {
			margin-top: 1.25rem;
			padding: .75rem 1rem;
		}
	}