/* DriveReady login page — matches the owner's mockup.
   Tokens: bg #F6F8FC · navy #12213A · royal blue #2563EB · emerald #22A06B.
   Inter only (see fonts.css). Scoped to body.dr-login only,
   so the interim re-auth dialog keeps the core design. */

:root {
	--dr-bg: #F6F8FC;
	--dr-navy: #12213A;
	--dr-blue: #2563EB;
	--dr-blue-dark: #1D4ED8;
	--dr-green: #22A06B;
	--dr-muted: #526581;
	--dr-faint: #8296AE;
	--dr-border: #D7E2EF;
	--dr-card-border: #E2EAF3;
}

body.login.dr-login {
	background: var(--dr-bg);
	color: var(--dr-navy);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 18px 20px 34px;
	box-sizing: border-box;
}
body.login.dr-login *, body.login.dr-login *::before, body.login.dr-login *::after { box-sizing: border-box; }

/* ---------- Top bar ---------- */
.dr-topbar {
	width: 100%; max-width: 480px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.dr-back {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--dr-navy); font-weight: 600; font-size: 16.5px; text-decoration: none;
	min-height: 44px;
}
.dr-back:hover { color: var(--dr-blue); }
.dr-back svg { flex: none; }
.dr-switch {
	display: inline-flex; align-items: center; gap: 2px;
	background: #fff; border: 1.5px solid var(--dr-border); border-radius: 999px; padding: 3px;
}
.dr-switch a {
	padding: 6px 15px; border-radius: 999px;
	color: var(--dr-navy); font-weight: 700; font-size: 14.5px; line-height: 1.25; text-decoration: none;
}
.dr-switch a.is-active { background: var(--dr-blue); color: #fff; }

/* ---------- Column / header block ---------- */
body.login.dr-login #login {
	width: 100%; max-width: 480px;
	margin: 0; padding: 0;
}
body.login.dr-login #login .wp-login-logo { display: none; }
.dr-login-head { text-align: center; margin: 30px 0 24px; }
.dr-logo { display: inline-block; }
.dr-logo img { width: 230px; max-width: 62vw; height: auto; display: block; }
.dr-welcome {
	font-size: clamp(31px, 7.4vw, 41px); font-weight: 800; letter-spacing: -0.02em;
	line-height: 1.12; margin: 20px 0 8px; color: var(--dr-navy);
}
.dr-sub { color: var(--dr-muted); font-size: 17px; margin: 0; }

/* ---------- Notices ---------- */
body.login.dr-login #login_error,
body.login.dr-login .message,
body.login.dr-login #login-message {
	border-radius: 12px; padding: 13px 16px; margin: 0 0 18px;
	font-size: 15px; line-height: 1.5; box-shadow: none;
}
body.login.dr-login #login_error {
	background: #FEF2F2; border: 1px solid #F3C2C2; border-inline-start: 4px solid #DC2626; color: #8A1F1F;
}
body.login.dr-login .message,
body.login.dr-login #login-message {
	background: #E4F8EC; border: 1px solid #BDE5CC; border-inline-start: 4px solid var(--dr-green); color: #14532D;
}
body.login.dr-login #login_error a, body.login.dr-login .message a { color: inherit; font-weight: 600; }

/* ---------- Form card ---------- */
body.login.dr-login #login form {
	background: #fff;
	border: 1px solid var(--dr-card-border);
	border-radius: 20px;
	box-shadow: 0 14px 34px rgba(18, 33, 58, 0.09);
	padding: 30px 28px 28px;
	margin: 0;
	display: flex; flex-direction: column;
}
.dr-card-title {
	font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2;
	margin: 0 0 22px; color: var(--dr-navy); order: -1;
}
body.login.dr-login #login form > p,
body.login.dr-login #login form > div { margin: 0; }
body.login.dr-login #login label {
	display: block; font-size: 15px; font-weight: 600; color: var(--dr-navy);
	margin: 0 0 8px; line-height: 1.35;
}
body.login.dr-login #login form p + p,
body.login.dr-login #login form .user-pass-wrap { margin-top: 18px; }

body.login.dr-login #login input[type="text"],
body.login.dr-login #login input[type="password"],
body.login.dr-login #login input[type="email"] {
	width: 100%; height: 52px;
	font-size: 16px; color: var(--dr-navy);
	background-color: #fff;
	border: 1.5px solid #C7D5E4; border-radius: 10px;
	padding: 0 14px; margin: 0;
	box-shadow: none;
}
body.login.dr-login #login input::placeholder { color: #93A5BB; opacity: 1; }
body.login.dr-login #login input:focus {
	border-color: var(--dr-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
	outline: none;
}
/* Field icons (inline SVG) + the thin divider after the icon, as in the mockup. */
body.login.dr-login #user_login,
body.login.dr-login #user_email,
body.login.dr-login #user_pass {
	background-repeat: no-repeat;
}
body.login.dr-login #login #user_login,
body.login.dr-login #login #user_email { padding-inline-start: 54px; }
body.login.dr-login #login #user_pass { padding-inline-start: 54px; padding-inline-end: 56px; }
body.login.dr-login #user_login {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526581' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 19.4c1.2-3.1 3.9-4.7 7-4.7s5.8 1.6 7 4.7'/%3E%3C/svg%3E"),
		linear-gradient(#DCE6F0, #DCE6F0);
	background-size: 21px 21px, 1px 26px;
	background-position: 15px center, 44px center;
}
body.login.dr-login #user_email {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526581' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='12' rx='2'/%3E%3Cpath d='M4.5 7.8 12 13.5l7.5-5.7'/%3E%3C/svg%3E"),
		linear-gradient(#DCE6F0, #DCE6F0);
	background-size: 21px 21px, 1px 26px;
	background-position: 15px center, 44px center;
}
body.login.dr-login #user_pass {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526581' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"),
		linear-gradient(#DCE6F0, #DCE6F0);
	background-size: 21px 21px, 1px 26px;
	background-position: 15px center, 44px center;
}
/* Credential fields stay LTR for typing, even on the Arabic page (core adds .ltr). */
body.login.dr-login #login input.ltr { direction: ltr; text-align: left; }

/* Password visibility toggle (core button, restyled with an SVG eye). */
body.login.dr-login .wp-pwd { position: relative; }
body.login.dr-login .wp-pwd .wp-hide-pw {
	position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px; min-height: 42px;
	background: transparent; border: none; border-radius: 8px; box-shadow: none;
	cursor: pointer; padding: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.6 12 5.6 21.5 12 21.5 12 18 18.4 12 18.4 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 23px 23px;
}
body.login.dr-login .wp-pwd .wp-hide-pw:hover { background-color: #EFF6FF; }
body.login.dr-login .wp-pwd .wp-hide-pw .dashicons { display: none; }
body.login.dr-login .wp-pwd .wp-hide-pw[data-toggle="1"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5 20 19.5'/%3E%3Cpath d='M9.9 6.2A9.4 9.4 0 0 1 12 6c6 0 9.5 6 9.5 6a17.6 17.6 0 0 1-3.3 3.5M6 8.5A16.9 16.9 0 0 0 2.5 12S6 18 12 18c1.2 0 2.3-.3 3.3-.7'/%3E%3C/svg%3E");
}

/* Remember-me row (+ the forgot link the script moves into it). */
body.login.dr-login #login .forgetmenot {
	display: flex; align-items: center; justify-content: flex-start; gap: 9px;
	margin-top: 18px; float: none;
}
body.login.dr-login #login .forgetmenot .dr-forgot { margin-inline-start: auto; }
body.login.dr-login #login .forgetmenot label {
	display: inline-flex; align-items: center; gap: 9px;
	margin: 0; font-size: 15px; font-weight: 500; cursor: pointer;
}
body.login.dr-login #login input[type="checkbox"] {
	width: 21px; height: 21px; margin: 0; flex: none;
	accent-color: var(--dr-blue); cursor: pointer;
}
.dr-forgot {
	color: var(--dr-blue); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.dr-forgot:hover { text-decoration: underline; text-underline-offset: 3px; }
.dr-backrow { margin-top: 16px; text-align: center; }

/* Submit button */
body.login.dr-login #login .submit { margin-top: 20px; float: none; position: relative; }
body.login.dr-login #login input[type="submit"] {
	width: 100%; height: 52px;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	background: var(--dr-blue); color: #fff;
	border: none; border-radius: 10px; box-shadow: none;
	font-size: 17px; font-weight: 700; line-height: 1;
	cursor: pointer; text-shadow: none;
}
body.login.dr-login #login input[type="submit"]:hover { background: var(--dr-blue-dark); }
body.login.dr-login #login input[type="submit"].dr-loading { opacity: 0.75; pointer-events: none; }
/* Arrow + spinner are real spans (an <input> cannot host pseudo-elements);
   the script inserts them into the submit row. Offset = half the label
   width + a gap, per action and language. */
body.dr-action-login #login .submit { --sb: 40px; }
body.dr-action-register #login .submit { --sb: 46px; }
.dr-submit-arrow, .dr-submit-spinner {
	position: absolute; top: 50%; display: none; pointer-events: none;
	inset-inline-start: calc(50% + var(--sb, 40px));
}
.dr-submit-arrow { transform: translateY(-50%); line-height: 0; }
body.dr-action-login .dr-submit-arrow,
body.dr-action-register .dr-submit-arrow { display: block; }
form.dr-submitting .dr-submit-arrow { display: none !important; }
.dr-submit-spinner {
	width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
	animation: dr-spin 0.7s linear infinite;
}
form.dr-submitting .dr-submit-spinner { display: block; }
@keyframes dr-spin { to { transform: rotate(360deg); } }

/* Divider + outlined create-account button (inside the card, below submit). */
.dr-divider {
	display: flex; align-items: center; gap: 14px;
	margin-top: 22px; color: var(--dr-muted); font-size: 14.5px;
}
.dr-divider::before, .dr-divider::after { content: ""; flex: 1; height: 1px; background: var(--dr-border); }
.dr-create-btn {
	display: flex; align-items: center; justify-content: center;
	height: 52px; margin-top: 14px;
	background: #fff; color: var(--dr-blue);
	border: 1.5px solid var(--dr-blue); border-radius: 10px;
	font-size: 16px; font-weight: 700; text-decoration: none;
}
.dr-create-btn:hover { background: #EFF6FF; color: var(--dr-blue-dark); }

/* Register-form note under the email field */
body.login.dr-login #reg_passmail { color: var(--dr-muted); font-size: 14px; margin-top: 14px; line-height: 1.5; }

/* Card flow: title, fields, remember row, submit, then the
   divider + account button the PHP hook prints after the password field. */
body.dr-action-login #loginform > p:not(.forgetmenot):not(.submit) { order: 1; }
body.dr-action-login #loginform .user-pass-wrap { order: 2; }
body.dr-action-login #loginform .forgetmenot { order: 3; }
body.dr-action-login #loginform .dr-forgot { order: 3; align-self: flex-end; }
body.dr-action-login #loginform .submit { order: 4; }
body.dr-action-login #loginform .dr-divider { order: 5; }
body.dr-action-login #loginform .dr-create-btn { order: 6; }
body.dr-action-register #registerform > p:not(.submit) { order: 1; }
body.dr-action-register #registerform #reg_passmail { order: 2; }
body.dr-action-register #registerform .submit { order: 3; }
body.dr-action-register #registerform .dr-divider { order: 4; }
body.dr-action-register #registerform .dr-create-btn { order: 5; }
body.dr-action-lostpassword #lostpasswordform .submit,
body.dr-action-resetpass #resetpassform .submit { order: 5; }
body.dr-action-lostpassword #lostpasswordform .dr-backrow { order: 6; width: 100%; }

/* Core rows this design replaces */
body.login.dr-login #nav,
body.login.dr-login #backtoblog,
body.login.dr-login .privacy-policy-page-link { display: none; }

/* ---------- Bottom chrome ---------- */
.dr-login-foot { width: 100%; max-width: 480px; text-align: center; margin-top: 24px; }
.dr-help { color: var(--dr-muted); font-size: 15.5px; margin: 0; }
.dr-help a { color: var(--dr-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dr-banner {
	margin-top: 18px; padding: 15px 18px;
	background: #DFF3E4; border-radius: 12px;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	color: #0E5B33; font-weight: 700; font-size: 16px; line-height: 1.4;
}
.dr-banner svg { flex: none; }
.dr-legal { margin: 16px 0 0; color: var(--dr-faint); font-size: 14px; }
.dr-legal a { color: var(--dr-faint); text-decoration: none; }
.dr-legal a:hover { color: var(--dr-muted); text-decoration: underline; }

:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; }

/* Desktop breathing room */
@media (min-width: 641px) {
	body.login.dr-login { padding-top: 30px; }
	.dr-login-head { margin-top: 40px; }
	body.login.dr-login #login form { padding: 32px 32px 30px; }
}

/* Small phones */
@media (max-width: 400px) {
	body.login.dr-login { padding-inline: 16px; }
	body.login.dr-login #login form { padding: 26px 20px 24px; }
	.dr-welcome { font-size: 30px; }
	.dr-logo img { width: 205px; }
}

@media (prefers-reduced-motion: reduce) {
	body.login.dr-login *, body.login.dr-login *::before, body.login.dr-login *::after {
		animation: none !important; transition: none !important;
	}
}