/**
 * Stylesheet for auth pages.
 *
 * This stylesheet is a part of Melmium plugin, that is default theme for auth pages.
 * It is loaded only on auth pages.
 *
 * @package Melmium
 * @version 1.0.3
 */

:root {
	--mlm-sm-header-height: 120px;
	--text-color-black: #000;
	--bg-color-black: #151515;
}

@layer reset, base, components;

/**
 * ----------------------------------------------------------------------------
 * Reset styles
 * ----------------------------------------------------------------------------
 */
@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
	}
}

/**
 * ----------------------------------------------------------------------------
 * Base styles
 * ----------------------------------------------------------------------------
 */
@layer base {
	body {
		font-family: sans-serif;
		font-size: 14px;
		color: var(--text-color-black);
		line-height: 1.5;
	}
}

/**
 * ----------------------------------------------------------------------------
 * Component styles
 * ----------------------------------------------------------------------------
 */
@layer components {

	/*
	 * Header
	 * ------------------------------- */
	.mlm-header {
		position: fixed;
		top: 0;
		right: 50%;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--bg-color-black);

		@media screen and (max-width: 1000px) {
			top: 0;
			right: 0;
			left: 0;
			height: var(--mlm-sm-header-height);
		}
	}

	.mlm-header-logo {
		font-size: 32px;
		font-weight: bold;
		letter-spacing: 0.08em;
		text-indent: -0.08em;

		&,
		&:link,
		&:visited,
		&:hover,
		&:active,
		&:focus {
			color: #fff;
			text-decoration: none;
		}

		@media screen and (max-width: 1000px) {
			font-size: 22px;
		}
	}

	/*
	 * Auth frame
	 * ------------------------------- */
	.mlm-authframe {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f2f2f2;

		@media screen and (max-width: 1000px) {
			top: var(--mlm-sm-header-height);
			right: 0;
			bottom: 0;
			left: 0;
			justify-content: flex-start;
			padding: 56px 0 0;
		}
	}

	.mlm-title {
		width: 100%;
		margin: -48px 0 28px;
		font-size: 20px;
		font-weight: bold;
		color: #666;
		line-height: 1;
		letter-spacing: 0.04em;
		text-align: center;

		@media screen and (max-width: 1000px) {
			margin: 0 0 24px;
			font-size: 16px;
		}
	}

	.mlm-form {
		position: relative;
		width: 400px;
		height: fit-content;
		padding: 32px 42px;
		border-radius: 4px;
		background-color: #fff;

		&::after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			display: block;
			content: '';
			background-color: #000;
			filter: blur(4px);
			mix-blend-mode: overlay;
		}

		@media screen and (max-width: 1000px) {
			width: 320px;
			max-width: 400px;
			padding: 16px 24px;
		}
	}


	.mlm-form * label {
		display: block;
		padding-bottom: 8px;
		color: #333;
		cursor: default;
	}

	.mlm-form-error {
		padding: 8px 10px;
		margin-bottom: 12px;
		background-color: rgba(223, 43, 169, 0.2);
		border-radius: 8px;

		&::before {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 18px;
			height: 18px;
			margin-right: 6px;
			content: '!';
			background-color: #df2ba9;
			border-radius: 50%;
			font-size: 12px;
			font-weight: bold;
			color: #fff;
		}
	}

	.mlm-form-input {
		width: 100%;

		& + & {
			margin-top: 24px;
		}

		input[type=email],
		input[type=password] {
			width: 100%;
			padding: 8px 12px;
			border: 1px solid #ccc;
			border-radius: 4px;
			background-color: #fcfcfc;
			font-size: 16px;
			line-height: 1.5;
		}
	}

	.mlm-form-rememberme {
		padding: 0 1px;
		margin-top: 8px;
	}

	.mlm-form-rememberme label {
		display: inline-flex;
		padding: 0 0 0 8px;
	}

	.mlm-form-submit {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24px;

		&.mlm-form-submit-only {
			justify-content: flex-end;
		}

		button[type=submit] {
			padding: 8px 16px;
			border: none;
			border-radius: 4px;
			background-color: rgb(25, 164, 219);
			color: #fff;
			cursor: pointer;

			@media (hover: hover) {
				&:hover {
					background-color: rgba(25, 164, 219, 0.8);
				}
			}
		}

		a {
			&,
			&:link,
			&:visited,
			&:hover,
			&:active,
			&:focus {
				color: var(--text-color-black);
				text-decoration: none;
			}

			@media (hover: hover) {
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	.mlm-form-lostpassword {
		display: flex;
		justify-content: flex-start;
		margin-top: 24px;

		a {
			&,
			&:link,
			&:visited,
			&:hover,
			&:active,
			&:focus {
				color: #777;
				text-decoration: none;
			}

			@media (hover: hover) {
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}

	.mlm-message {
		position: relative;
		width: 400px;
		height: fit-content;
		padding: 24px 42px;
		border-top: 5px solid rgba(25, 164, 219, 0.75);
		border-radius: 4px;
		background-color: #fff;

		@media screen and (max-width: 1000px) {
			width: 320px;
			max-width: 400px;
			padding: 12px 24px;
		}

		&::after {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -1;
			display: block;
			content: '';
			background-color: #000;
			filter: blur(4px);
			mix-blend-mode: overlay;
		}

		a {
			@media (hover: hover) {
				&:hover {
					text-decoration: underline;
				}
			}
		}

		& + .mlm-form {
			margin-top: 12px;
		}
	}
}