/* Daily Rider Community: the sign-in experience.
   1. wp-login.php (body.drc-auth): brand panel beside a clean form card.
   2. The theme's sign-in pop-up (#account-modal), restyled to match. */

/* ---------- 1. wp-login.php ---------- */

body.login.drc-auth {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	height: auto; /* WordPress pins the login body to the screen height */
	min-height: 100vh;
	margin: 0;
	background: var(--dr-bg);
	color: var(--dr-ink);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
body.drc-auth *,
body.drc-auth *::before,
body.drc-auth *::after { box-sizing: border-box; }
body.drc-auth .language-switcher,
body.drc-auth #login h1.wp-login-logo { display: none; }

/* Brand panel */
body.drc-auth .drc-auth-brand {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	min-height: 100vh;
	overflow: hidden;
	background: #000;
	color: #fff;
}
.drc-auth-brand__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; } /* keeps the tank and the Bear 650 badge in the panel */
.drc-auth-brand::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .25) 48%, rgba(0, 0, 0, .82) 72%, rgba(0, 0, 0, .94) 100%);
}
.drc-auth-brand__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; height: 100%; min-height: 100vh; padding: 44px 56px 40px; }
.drc-auth-brand__logo { display: inline-block; align-self: flex-start; color: #fff; font-size: 22px; font-weight: 700; text-decoration: none; }
.drc-auth-brand__logo img { display: block; width: auto; height: 68px; }
.drc-auth-brand__logo:focus-visible { outline: 2px solid #8cc4ff; outline-offset: 4px; }
.drc-auth-brand__copy { max-width: 520px; margin-top: auto; }
.drc-auth-brand__eyebrow { margin: 0 0 12px; color: #8cc4ff; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.drc-auth-brand__title { margin: 0; font-family: "Barlow Condensed", "Inter", sans-serif; font-size: 68px; font-weight: 700; line-height: .95; text-transform: uppercase; }
.drc-auth-brand__list { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.drc-auth-brand__list li { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; }
.drc-auth-brand__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.drc-auth-brand__icon svg { display: block; }
.drc-auth-brand__foot { margin: 0; color: rgba(255, 255, 255, .6); font-size: 13px; }

/* Form side: an open column on the page colour, no card. Order: heading, notices,
   the Log in / Create account switch, Google, the form, one footer line, the trust row. */
body.login.drc-auth #login {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: center;
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100% - 48px));
	margin: 48px 0;
	padding: 0;
}
body.drc-auth #login > * { order: 3; }
body.drc-auth #login > .drc-auth-head { order: 0; }
body.drc-auth #login > .notice,
body.drc-auth #login > .message,
body.drc-auth #login > #login_error { order: 1; }
body.drc-auth #login > .drc-auth-tabs { order: 2; }

body.drc-auth .drc-auth-head { margin: 0 0 24px; }
body.drc-auth .drc-auth-head h2 { margin: 0; color: var(--dr-ink); font-family: "Inter", system-ui, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
body.drc-auth .drc-auth-head p { margin: 6px 0 0; color: var(--dr-muted); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

/* WordPress's notices: errors in red, confirmations in green, the rest in a soft tint. */
body.drc-auth #login .notice,
body.drc-auth #login .message,
body.drc-auth #login #login_error {
	margin: 0 0 20px;
	padding: 11px 14px;
	border: 0;
	border-radius: 8px;
	background: var(--dr-accent-soft);
	box-shadow: none;
	color: var(--dr-ink);
	font-size: 14px;
	line-height: 1.5;
}
body.drc-auth #login .notice p,
body.drc-auth #login .message p,
body.drc-auth #login #login_error p { margin: 0; padding: 0; }
body.drc-auth #login #login_error,
body.drc-auth #login .notice-error { background: var(--dr-nc-bg); color: var(--dr-nc); }
body.drc-auth #login .success,
body.drc-auth #login .notice-success { background: var(--dr-pb-bg); color: var(--dr-pb); }
body.drc-auth #login #login_error a,
body.drc-auth #login .notice a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Log in / Create account: a two-way switch, the current one in black */
.drc-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--dr-line) 75%, var(--dr-bg));
}
.drc-auth-tabs a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	border-radius: 7px;
	color: var(--dr-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .18s ease, background-color .18s ease;
}
.drc-auth-tabs a:hover { color: var(--dr-ink); }
.drc-auth-tabs a:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
.drc-auth-tabs a.is-active { background: var(--dr-btn); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); color: var(--dr-btn-ink); }

/* The form sits flat on the page. */
body.drc-auth #login form {
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
body.drc-auth #login form p,
body.drc-auth #login form .user-pass-wrap { position: relative; margin: 0 0 18px; }
body.drc-auth #login form p.submit { margin: 0; }
body.drc-auth #login label { display: block; margin: 0 0 8px; color: var(--dr-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 16px; text-transform: uppercase; }
body.drc-auth #login form .input,
body.drc-auth #login form input[type="text"],
body.drc-auth #login form input[type="email"],
body.drc-auth #login form input[type="password"] {
	width: 100%;
	height: 46px;
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--dr-line);
	border-radius: 8px;
	background: var(--dr-surface);
	box-shadow: none;
	color: var(--dr-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .18s ease, box-shadow .18s ease;
}
body.drc-auth #login form .input::placeholder { color: var(--dr-muted); opacity: .75; }
body.drc-auth #login form .input:hover { border-color: color-mix(in srgb, var(--dr-muted) 55%, var(--dr-line)); }
body.drc-auth #login form .input:focus,
body.drc-auth #login form input:focus { border-color: var(--dr-accent); outline: 0; box-shadow: 0 0 0 3px var(--dr-accent-soft); }
/* Browsers tint autofilled fields blue; keep them in the design's colours. */
body.drc-auth #login input:-webkit-autofill,
#account-modal input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 40px var(--dr-surface) inset;
	-webkit-text-fill-color: var(--dr-ink);
	caret-color: var(--dr-ink);
	transition: background-color 9999s ease 0s;
}
body.drc-auth #login input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px var(--dr-surface) inset, 0 0 0 3px var(--dr-accent-soft); }

/* "Forgot password?" sits on the password label's line, at the right */
body.drc-auth #login .user-pass-wrap .drc-forgot { position: absolute; top: 0; right: 0; color: var(--dr-accent); font-size: 13px; font-weight: 600; line-height: 16px; text-decoration: none; }
body.drc-auth #login .user-pass-wrap .drc-forgot:hover { text-decoration: underline; }

/* Password with its show/hide eye */
body.drc-auth #login .wp-pwd { position: relative; }
body.drc-auth #login .wp-pwd .input { padding-right: 48px; }
body.drc-auth #login .button.wp-hide-pw {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: transparent;
	box-shadow: none;
	color: var(--dr-muted);
}
body.drc-auth #login .button.wp-hide-pw:hover { color: var(--dr-ink); }
body.drc-auth #login .button.wp-hide-pw:focus { outline: 2px solid var(--dr-accent); outline-offset: -2px; box-shadow: none; }
body.drc-auth #login .button.wp-hide-pw .dashicons { top: 0; width: 20px; height: 20px; font-size: 20px; }

/* Riders stay logged in, the way social apps work; the box is ticked for them. */
body.drc-auth #loginform .forgetmenot { display: none; }

/* The main button: full width, in the theme's blue */
body.drc-auth #login .submit { float: none; clear: both; display: block; margin: 0; padding: 0; }
body.drc-auth #login .button-primary,
body.drc-auth #login #wp-submit {
	float: none;
	display: block;
	width: 100%;
	height: 48px;
	min-height: 0;
	margin: 4px 0 0;
	padding: 0 18px;
	border: 1px solid var(--dr-accent-strong);
	border-radius: 8px;
	background: var(--dr-accent-strong);
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-shadow: none;
	cursor: pointer;
	transition: filter .18s ease, transform .12s ease;
}
body.drc-auth #login .button-primary:hover { filter: brightness(1.1); }
body.drc-auth #login .button-primary:active { transform: scale(.98); }
body.drc-auth #login .button-primary:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; box-shadow: none; }
/* The heading already says a password link is emailed. */
body.drc-auth #login #reg_passmail { display: none; }

/* One footer line: "No account? Create one" */
body.drc-auth #login #nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 16px;
	margin: 24px 0 0;
	padding: 0;
	font-size: 0; /* hides WordPress's " | " separator */
	text-align: center;
}
body.drc-auth #login #nav::before { color: var(--dr-muted); font-size: 14px; }
body.drc-auth #login #nav a { color: var(--dr-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
body.drc-auth #login #nav a:hover { text-decoration: underline; }
body.drc-auth.login-action-login #login #nav:has(.wp-login-register)::before { content: "No account?"; }
body.drc-auth.login-action-register #login #nav::before { content: "Already a member?"; }
body.drc-auth.login-action-lostpassword #login #nav::before { content: "Remembered it?"; }
body.drc-auth.login-action-login #login #nav:has(.wp-login-register),
body.drc-auth.login-action-register #login #nav,
body.drc-auth.login-action-lostpassword #login #nav { gap: 6px; }
body.drc-auth.login-action-register #login #nav .wp-login-lost-password,
body.drc-auth.login-action-lostpassword #login #nav .wp-login-register { display: none; }

/* The trust row: Secure, Privacy, back to the site */
body.drc-auth #login .drc-auth-trust,
body.drc-auth #login #backtoblog {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 28px 0 0;
	padding: 0;
	color: var(--dr-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 16px;
	text-transform: uppercase;
}
.drc-auth-trust__lock { display: inline-flex; align-items: center; gap: 6px; }
.drc-auth-trust__lock svg { display: block; flex: none; }
body.drc-auth #login .drc-auth-trust a,
body.drc-auth #login #backtoblog a { color: var(--dr-muted); text-decoration: none; transition: color .18s ease; }
body.drc-auth #login .drc-auth-trust a:hover,
body.drc-auth #login #backtoblog a:hover { color: var(--dr-ink); }
.drc-auth-trust > * + *::before { content: "\00B7"; display: inline-block; margin: 0 10px; color: var(--dr-muted); font-weight: 700; }
body.drc-auth .privacy-policy-page-link { margin: 10px 0 0; font-size: 12px; text-align: center; }
body.drc-auth .privacy-policy-page-link a { color: var(--dr-muted); }

/* Password strength on "Set a new password" */
body.drc-auth #login #pass-strength-result { margin: 8px 0 0; padding: 8px 12px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 600; }
body.drc-auth #login .indicator-hint { margin: 0 0 18px; color: var(--dr-muted); font-size: 13px; }
body.drc-auth #login .user-pass1-wrap p { margin-bottom: 0; }
body.drc-auth #login .pw-weak { margin: 0 0 16px; }
body.drc-auth #login .pw-weak label { display: inline; margin-left: 6px; letter-spacing: normal; text-transform: none; }
body.drc-auth #login .reset-pass-submit { display: flex; flex-direction: column-reverse; gap: 10px; }
body.drc-auth #login .reset-pass-submit .button:not(.button-primary) {
	float: none;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--dr-line);
	border-radius: 8px;
	background: var(--dr-surface);
	box-shadow: none;
	color: var(--dr-ink);
	font-size: 14px;
	font-weight: 600;
}

/* Short desktop screens (laptops, a browser with toolbars): tighter, so nothing scrolls. */
@media (min-width: 961px) and (max-height: 860px) {
	.drc-auth-brand__inner { padding: 36px 48px 32px; gap: 24px; }
	.drc-auth-brand__logo img { height: 58px; }
	.drc-auth-brand__title { font-size: 56px; }
	.drc-auth-brand__list { gap: 10px; margin-top: 20px; }
	body.login.drc-auth #login { margin: 28px 0; }
	body.drc-auth .drc-auth-head { margin-bottom: 20px; }
	body.drc-auth .drc-auth-head h2 { font-size: 28px; }
	body.drc-auth #login form p,
	body.drc-auth #login form .user-pass-wrap { margin-bottom: 16px; }
	body.drc-auth #login #nav { margin-top: 20px; }
	body.drc-auth #login .drc-auth-trust,
	body.drc-auth #login #backtoblog { margin-top: 22px; }
}

/* Narrow screens: the photo becomes a band with the logo, the form follows. */
@media (max-width: 960px) {
	body.login.drc-auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
	body.drc-auth .drc-auth-brand { grid-column: 1; grid-row: 1; min-height: auto; }
	.drc-auth-brand__inner { min-height: 0; padding: 22px 24px 26px; gap: 28px; }
	.drc-auth-brand__logo img { height: 48px; }
	.drc-auth-brand__eyebrow { margin-bottom: 8px; }
	.drc-auth-brand__title { font-size: 40px; }
	.drc-auth-brand__list,
	.drc-auth-brand__foot { display: none; }
	body.login.drc-auth #login { grid-column: 1; grid-row: 2; align-self: start; width: min(400px, calc(100% - 40px)); margin: 32px 0 40px; }
}
@media (max-width: 480px) {
	body.drc-auth .drc-auth-head h2 { font-size: 26px; }
}

/* ---------- 2. The theme's sign-in pop-up ---------- */

#account-modal.ct-panel .ct-panel-content { padding: 24px 16px; } /* the theme's 35px left phones too narrow */
#account-modal .ct-account-modal {
	width: min(420px, 100%);
	max-width: none;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--dr-line);
	border-radius: 14px;
	background: var(--dr-surface);
	box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45);
	color: var(--dr-ink);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
/* The logo on a black band, like the site header */
#account-modal .ct-account-modal::before {
	content: "";
	display: block;
	height: 92px;
	background: #000 var(--drc-logo, none) center / auto 54px no-repeat;
}
/* Log in / Sign up: the same two-way switch as the login page */
#account-modal .ct-account-modal > ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin: 24px 28px 0;
	padding: 4px;
	border: 0;
	border-radius: 10px;
	background: color-mix(in srgb, var(--dr-line) 75%, var(--dr-surface));
	list-style: none;
}
#account-modal .ct-account-modal > ul li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--dr-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	width: auto; /* the theme sets 50%, which halves each tab again inside its column */
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease;
}
#account-modal .ct-account-modal > ul li:hover { color: var(--dr-ink); }
#account-modal .ct-account-modal > ul li.active { background: var(--dr-btn); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); color: var(--dr-btn-ink); }
#account-modal .ct-account-modal > ul li:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
#account-modal .ct-account-forms { padding: 20px 28px 28px; }
#account-modal .ct-account-forms form p { margin: 0 0 18px; }
#account-modal .ct-account-forms form p:last-of-type { margin-bottom: 0; }
#account-modal .ct-account-forms label { display: block; margin: 0 0 8px; color: var(--dr-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 16px; text-transform: uppercase; }
#account-modal .ct-account-forms input.input,
#account-modal .ct-account-forms input[type="text"],
#account-modal .ct-account-forms input[type="email"],
#account-modal .ct-account-forms input[type="password"] {
	width: 100%;
	height: 46px;
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--dr-line);
	border-radius: 8px;
	background: var(--dr-surface);
	box-shadow: none;
	color: var(--dr-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
}
#account-modal .ct-account-forms input::placeholder { color: var(--dr-muted); opacity: .75; }
#account-modal .ct-account-forms input:hover { border-color: color-mix(in srgb, var(--dr-muted) 55%, var(--dr-line)); }
#account-modal .ct-account-forms input:focus { border-color: var(--dr-accent); outline: 0; box-shadow: 0 0 0 3px var(--dr-accent-soft); }
#account-modal .account-password-input { position: relative; display: block; }
#account-modal .show-password-input { color: var(--dr-muted); }
#account-modal .login-remember { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
#account-modal .login-remember > span { display: flex; align-items: center; gap: 10px; }
#account-modal .login-remember label { margin: 0; color: var(--dr-muted); font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: none; }
#account-modal .login-remember input[type="checkbox"] { flex: none; margin: 0; accent-color: var(--dr-accent); }
#account-modal .ct-forgot-password,
#account-modal .ct-back-to-login { color: var(--dr-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
#account-modal .ct-forgot-password:hover,
#account-modal .ct-back-to-login:hover { text-decoration: underline; }
#account-modal .ct-back-to-login { display: block; margin-top: 18px; text-align: center; }
#account-modal .ct-account-forms .ct-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 0;
	height: 48px;
	padding: 0 18px;
	border: 1px solid var(--dr-accent-strong);
	border-radius: 8px;
	background: var(--dr-accent-strong);
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	transition: filter .18s ease, transform .12s ease;
}
#account-modal .ct-account-forms .ct-button:hover { filter: brightness(1.1); }
#account-modal .ct-account-forms .ct-button:active { transform: scale(.98); }
#account-modal .ct-account-forms .ct-button svg { fill: currentColor; }
#account-modal .ct-account-forms .ct-account-register-submit { margin-top: 4px; }
#account-modal .ct-account-forms .ct-form-notification,
#account-modal .ct-account-forms .ct-form-notification-error {
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 0;
	border-radius: 10px;
	font-size: 14px;
}
#account-modal .ct-account-forms .ct-form-notification { background: var(--dr-pb-bg); color: var(--dr-pb); }
#account-modal .ct-account-forms .ct-form-notification-error { background: var(--dr-nc-bg); color: var(--dr-nc); }
#account-modal .ct-toggle-close { color: #fff; }

/* ---------- 3. Continue with Google (both places) ---------- */

.drc-google { margin: 0 0 16px; }
.drc-google[hidden] { display: none; }
.drc-google__button { display: flex; justify-content: center; min-height: 40px; }
.drc-google__button > div { margin: 0 auto; }
#account-modal .drc-google__button iframe { max-width: none; } /* the theme caps iframes at 100%, which clips Google's frame (it is 20px wider than its button) */
.drc-google__status { margin: 8px 0 0; color: var(--dr-muted); font-size: 13px; text-align: center; }
.drc-google__status:empty { display: none; }
.drc-google__status.is-error { color: var(--dr-nc); }
.drc-google__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 20px;
	color: var(--dr-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 16px;
	text-transform: uppercase;
}
.drc-google__or::before,
.drc-google__or::after { content: ""; flex: 1; height: 1px; background: var(--dr-line); }
body.drc-auth .drc-google { margin-bottom: 20px; }
#account-modal .drc-google { margin: 0 0 18px; }
#account-modal .drc-google p { margin: 8px 0 0; }