/*
 * Styles for the signed-out Medqon screens (agent login, admin login).
 *
 * Every class name in here starts with "login-", so nothing in this file can
 * touch a page that does not use those names.
 */

/* ---------- the page ---------- */

/* The page is one tall column: the form at the top, the footer band right at
   the bottom. Making the page at least as tall as the window is what keeps the
   footer down there when there is not much to show. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #ffffff;
}

.login-page {
	flex: 0 0 auto;            /* only as tall as the form itself */
	width: 100%;
	max-width: 440px;          /* the card is 500px wide on a desktop */
	/* "auto" on all four sides shares out the space the footer does not use:
	   the same amount above as below, the same amount left as right. That is
	   what puts the form in the middle of the window. On a short window there
	   is no space to share, so the form simply starts at the top. */
	margin: auto;
	padding: 40px 16px 32px;   /* 16px side padding keeps it off the edge on a phone */
}

/* ---------- logo and titles ---------- */

.login-logo {
	display: block;
	margin: 0 auto 28px;       /* middle of the page, with a gap underneath */
	width: 260px;
	max-width: 80%;            /* shrink on small phones instead of overflowing */
}

.login-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: #1a1a1a;
}

/* The step line under the heading on the sign up screens,
   e.g. "Step 2 of 3 - confirm your email". */
.login-step {
	margin: 0 0 22px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #5C04C4;
}

.login-subtitle {
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: #4a4a4a;
}

/* ---------- the two input boxes ---------- */

.login-field {
	margin-bottom: 14px;
	position: relative;        /* so the eye button can sit inside the box */
}

.login-input {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #d9dbe3;
	border-radius: 10px;
	background: #ffffff;
	font-size: 14px;
	color: #1a1a1a;
}

.login-input::placeholder {
	color: #9a9aa5;
}

/* A drop-down box, sized to match the boxes above it. The browser draws its
   own little arrow on the right, so we leave room for it. */
select.login-input {
	padding-right: 30px;
	cursor: pointer;
}

.login-input:focus {
	outline: none;
	border-color: #5C04C4;     /* Medqon purple while you are typing */
}

/* The password box needs room on the right for the eye button. */
.login-input-password {
	padding-right: 38px;
}

/* The one-time code box on the authentication screen. The letters sit in the
   middle and further apart, so a six figure code is easy to check. */
.login-input-code {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 6px;
}

.login-input-code::placeholder {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
}

.login-eye {
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 34px;              /* same height as the box it sits in */
	border: 0;
	background: none;
	color: #1a1a1a;
	cursor: pointer;
	padding: 0;
	display: flex;             /* keeps the little eye drawing in the middle */
	align-items: center;
	justify-content: center;
}

/* ---------- remember me / forgot password row ---------- */

.login-helper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;  /* remember me left, forgot link right */
	margin: 0 0 20px;
	font-size: 12px;
}

.login-remember {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: #4a4a4a;
	font-weight: 600;
	cursor: pointer;
}

.login-forgot {
	color: #1a1a1a;
	font-weight: 700;
}

.login-forgot:hover {
	color: #5C04C4;
}

/* ---------- the two buttons ---------- */

/* Both buttons are the same size and shape; only the colours differ. */
.login-button {
	display: block;
	width: 100%;
	height: 48px;
	border-radius: 999px;      /* fully rounded ends, like the design */
	border: 0;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	line-height: 48px;
	padding: 0;
	cursor: pointer;
}

/* Filled purple-to-blue button: "Log in". */
.login-button-primary {
	color: #ffffff;
	background: linear-gradient(90deg, #7007dd 0%, #1c0075 50%, #2f62e9 100%);
}

.login-button-primary:hover {
	color: #ffffff;
	filter: brightness(1.08);
}

/* Greyed out until both boxes have something in them. */
.login-button-primary:disabled {
	background: #b9b9b9;
	cursor: not-allowed;
	filter: none;
}

/* Outlined button: "Create an account". */
.login-button-outline {
	color: #5C04C4;
	background: #ffffff;
	border: 1px solid #5C04C4;
}

.login-button-outline:hover {
	color: #5C04C4;
	background: #f7f1ff;
}

/* ---------- the "Or" line between the buttons ---------- */

.login-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0;
	color: #8a8a94;
	font-size: 13px;
}

/* The two grey lines either side of the word "Or". */
.login-or::before,
.login-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e3e4ea;
}

/* ---------- bottom links and footer ---------- */

.login-admin-link {
	display: block;
	margin-top: 18px;
	text-align: center;
	font-size: 12px;
	color: #8a8a94;
}

/* "Back to Login" under the button. Darker and bolder than the small grey
   links, because it is the one thing left to do on these screens. */
.login-back {
	display: block;
	margin-top: 26px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
}

.login-back:hover {
	color: #5C04C4;
}

/* The checklist of password rules on the "set a password" screens.

   Every line starts grey. Once there is something in the password box,
   password_rules.js marks each line met or not met, and these two colours are
   what the person sees. */
.login-rules {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #6b6b75;
}

.login-rules li {
	margin-bottom: 3px;
}

/* Rule met: green with a tick. */
.login-rules li.is-met {
	color: #1e7e34;
}

/* Rule not met yet: red with a cross. */
.login-rules li.is-unmet {
	color: #c0392b;
}

/* The tick, cross or empty circle at the start of the line. */
.login-rules .rule-mark {
	display: inline-block;
	width: 14px;
}

/* A short note above the form, e.g. "A new code has been sent to your email
   address." after the Resend code link has been used. */
.login-note {
	margin: 0 0 18px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f4edff;               /* lightest wash of the brand purple */
	color: #5C04C4;
	font-size: 13px;
	text-align: center;
}

/* The footer band across the bottom of the page. It sits outside the form
   column and is twice as wide, so the help sentence fits on one line. */
.login-footer {
	flex-shrink: 0;            /* never squashed, however tall the form is */
	width: 100%;
	max-width: 800px;          /* wider than the form, so the help line fits */
	margin: 40px auto 0;
	padding: 20px 16px 28px;
	text-align: center;
	font-size: 12px;
	line-height: 1.6;
	color: #6b6b75;
}

.login-footer a {
	color: #5C04C4;
}

.login-footer-links {
	margin: 8px 0 0;
}

/* The "|" between Privacy Policy and Terms. */
.login-footer-divider {
	margin: 0 8px;
	color: #c7c7cf;
}

/* Red validation messages printed by CodeIgniter above the form. */
.login-page .error {
	margin-bottom: 14px;
	font-size: 13px;
}