/* ── Login screen — Railor site styling ── */

body.login {
border-radius: 6px;
border: 1px solid rgba(25, 25, 25, 0.08);
background: var(--off-white-200, #F1EFEC);
}

#login {
	width: 360px;
	max-width: 92vw;
	padding: clamp(48px, 9vh, 96px) 0 40px;
}

/* Hide WP's default logo — we inject our own brand mark below. */
#login h1 { display: none; }

/* ── Brand logo with the spinning "o" ── */
.gf-login-logo {
	margin: 0 0 clamp(24px, 4vh, 40px);
	text-align: center;
}

.gf-login-logo a {
	display: inline-block;
	line-height: 0;
}

.gf-login-logo svg {
	width: 148px;
	height: auto;
	display: block;
}

.gf-login-logo .o_circle {
	transform-box: fill-box;
	transform-origin: center;
	animation: gf-o-spin 3.2s linear infinite;
}

@keyframes gf-o-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gf-login-logo .o_circle { animation: none; }
}

/* ── Form card (auth forms only — not the language switcher) ── */
#loginform,
#lostpasswordform,
#resetpassform,
#registerform {
	margin-top: 0;
	padding: clamp(24px, 4vw, 32px);
	border-radius: 6px;
	border: 1px solid rgba(25, 25, 25, 0.08);
	background: var(--color-off-white-100, #F7F5F2);
	box-shadow: none;
	overflow: hidden;
}

.login form .forgetmenot { font-weight: 500; }

.login label {
	color: var(--color-black, #191919);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	margin: 6px 0 20px;
	padding: 12px 14px;
	width: 100%;
	border: 1px solid var(--color-gray-200, #CCCAC7);
	border-radius: 8px;
	background: var(--color-white, #FFF);
	font-family: var(--font-base), sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-black, #191919);
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--color-black, #191919);
	box-shadow: none;
	outline: 2px solid transparent;
}

/* Password field: keep the show/hide button aligned with the new input */
.login .wp-pwd { position: relative; }

.login .wp-pwd input {
	margin-bottom: 20px;
	padding-right: 44px;
}

.login .wp-pwd .button.wp-hide-pw {
	top: 4px;
	right: 3px;
	height: 40px;
	width: 40px;
	color: var(--color-gray-500, #807E7C);
}

.login .wp-pwd .button.wp-hide-pw:hover { color: var(--color-black, #191919); }

/* ── Submit button (site primary) ── */
.login .button-primary,
.wp-core-ui .login .button-primary {
	float: none;
	width: 100%;
	margin-top: 4px;
	padding: 14px 16px;
	border: 0;
	border-radius: 6px;
	background: #1A1919;
	color: #FFF;
	font-family: var(--font-base), sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	text-shadow: none;
	box-shadow: 0 9px 14px -5px rgba(255, 255, 255, 0.30) inset,
		0 4px 6px 0 rgba(0, 0, 0, 0.14);
	cursor: pointer;
	transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: #1A1919;
	box-shadow: 0 -1px 27px -2px rgba(255, 255, 255, 0.30) inset,
		0 9px 14px -5px rgba(255, 255, 255, 0.30) inset,
		0 4px 6px 0 rgba(0, 0, 0, 0.14);
}

/* ── Remember-me checkbox (custom, no blue ring, white tick) ── */
.login input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0 8px 0 0;
	border: 1px solid var(--color-gray-200, #CCCAC7);
	border-radius: 5px;
	background: var(--color-white, #FFF);
	box-shadow: none;
	outline: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.login input[type="checkbox"]:focus,
.login input[type="checkbox"]:focus-visible {
	border-color: var(--color-black, #191919);
	box-shadow: none;
	outline: none;
}

.login input[type="checkbox"]:checked {
	background: #1A1919;
	border-color: #1A1919;
}

.login input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: 0;
	color: transparent;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.2L4.4 8.5L11 1.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat;
}

/* ── Notices ── */
.login .message,
.login .notice,
.login #login_error {
	border-radius: 8px;
	border-left: 4px solid var(--color-gold, #EDAA24);
	background: var(--color-white, #FFF);
	box-shadow: 0 8px 20px -14px rgba(26, 26, 18, 0.18);
	font-size: 14px;
}

.login #login_error {
	border-left-color: #d63638;
}

/* ── Footer links ── */
.login #nav,
.login #backtoblog {
	text-align: center;
	padding: 0;
	margin: 16px 0 0;
}

.login #nav a,
.login #backtoblog a {
	color: var(--color-gray-500, #807E7C);
	font-size: 14px;
	font-weight: 500;
	transition: color 0.2s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--color-black, #191919);
}

/* ── Privacy Policy link ── */
.login .privacy-policy-page-link {
	margin-top: 22px;
	text-align: center;
}

.login .privacy-policy-page-link a,
.login a.privacy-policy-link {
	color: var(--color-gray-500, #807E7C);
	font-size: 14px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(25, 25, 25, 0.25);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.login .privacy-policy-page-link a:hover,
.login a.privacy-policy-link:hover {
	color: var(--color-black, #191919);
	text-decoration-color: var(--color-black, #191919);
}

/* ── Language switcher ── */
#language-switcher {
	margin-top: 12px;
}

#language-switcher select {
	/* padding: 9px 12px; */
	border: 1px solid var(--color-gray-200, #CCCAC7);
	border-radius: 8px;
	background: var(--color-white, #FFF);
	font-family: var(--font-base), sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-black, #191919);
	box-shadow: none;
}

#language-switcher select:focus {
	border-color: var(--color-black, #191919);
	box-shadow: none;
	outline: 2px solid transparent;
}

#language-switcher .button,
#language-switcher input[type="submit"] {
	padding: 9px 18px;
	border: 1px solid var(--color-gray-200, #CCCAC7);
	border-radius: 8px;
	background: var(--color-white, #FFF);
	color: var(--color-black, #191919);
	font-family: var(--font-base), sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

#language-switcher .button:hover,
#language-switcher input[type="submit"]:hover {
	border-color: var(--color-black, #191919);
	background: var(--color-off-white-100, #F7F5F2);
}