/*
 * Login styles, two parts:
 * 1. wp-login.php (failed logins with Loginizer's messages, lost password,
 *    new password, wp-admin re-login), branded after the Figma
 *    "Student_Login" frame. Loaded by inc/loginly.php on login_enqueue_scripts;
 *    every rule is scoped to .fdi-wplogin. The small re-login box inside
 *    wp-admin (interim login) keeps WordPress's look.
 * 2. The /login/ page (page 182, Elementor): Figma hero, card, figures strip
 *    and the Elementor Pro Login widget inside the card. Loaded on the front
 *    end by inc/assets.php.
 */

body.login.fdi-wplogin {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #cfc9bd url("../../../../uploads/2026/10/fdi-login-hero.jpg") no-repeat 68% top / cover;
	font-family: var(--fdi-font-body);
	color: var(--fdi-text);
}

/* ================================================================== Header */
.fdi-wplogin .fdi-login-header {
	width: 100%;
	background: var(--fdi-white);
}

.fdi-wplogin .fdi-login-header__inner {
	box-sizing: border-box;
	max-width: 1232px;
	margin: 0 auto;
	padding: 22px 16px;
}

.fdi-wplogin .fdi-login-header__logo {
	display: inline-block;
}

.fdi-wplogin .fdi-login-header__logo img {
	display: block;
	width: 220px;
	height: auto;
}

/* ==================================================================== Card */
.fdi-wplogin #login {
	box-sizing: border-box;
	align-self: flex-start;
	width: 434px;
	max-width: calc(100% - 32px);
	margin: 64px 0 0 max(16px, calc((100% - 1200px) / 2));
	padding: 0 0 30px;
	overflow: hidden;
	background: var(--fdi-white);
	border-radius: 30px;
	box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.32);
}

.fdi-wplogin #login h1 {
	margin: 0;
}

/* The banner is the logo link WordPress prints at the top of the card. */
.fdi-wplogin #login h1 a {
	display: block;
	width: 100%;
	height: 187px;
	margin: 0;
	background: url("../../../../uploads/2026/10/login-form-banner.jpg") center / cover no-repeat;
}

.fdi-wplogin .fdi-login-title {
	margin: 30px 32px 18px;
	font: 700 32px/1.2 var(--fdi-font-heading);
	color: var(--fdi-teal);
}

/* Notices: WordPress messages, form errors and Loginizer's lockout text. */
.fdi-wplogin #login .message,
.fdi-wplogin #login .notice,
.fdi-wplogin #login #login_error {
	margin: 0 32px 16px;
	padding: 10px 14px;
	border-left: 4px solid var(--fdi-teal);
	background: #eaf7f6;
	box-shadow: none;
	font-size: 14px;
	line-height: 1.5;
}

.fdi-wplogin #login #login_error,
.fdi-wplogin #login .notice-error {
	border-left-color: #d63638;
	background: #fcf0f1;
}

.fdi-wplogin #login .message p,
.fdi-wplogin #login .notice p {
	margin: 0;
}

.fdi-wplogin #login a {
	color: var(--fdi-navy);
}

/* ==================================================================== Form */
.fdi-wplogin #login form {
	margin: 0;
	padding: 0 32px;
	overflow: visible;
	background: none;
	border: 0;
	box-shadow: none;
}

.fdi-wplogin #login form::after {
	content: "";
	display: block;
	clear: both;
}

.fdi-wplogin #login label {
	font: 600 16px/1.4 var(--fdi-font-body);
	color: var(--fdi-text);
}

.fdi-wplogin #login form .input,
.fdi-wplogin #login input[type="text"],
.fdi-wplogin #login input[type="email"],
.fdi-wplogin #login input[type="password"] {
	box-sizing: border-box;
	height: 44px;
	min-height: 44px;
	margin: 6px 0 16px;
	padding: 0 20px;
	background: var(--fdi-white);
	border: 1px solid var(--fdi-text);
	border-radius: var(--fdi-radius-pill);
	box-shadow: none;
	font: 400 16px/42px var(--fdi-font-body);
	color: var(--fdi-text);
}

.fdi-wplogin #login form .input:focus,
.fdi-wplogin #login input[type="text"]:focus,
.fdi-wplogin #login input[type="password"]:focus {
	border-color: var(--fdi-teal);
	box-shadow: 0 0 0 1px var(--fdi-teal);
	outline: 0;
}

/* Show-password eye inside the pill. */
.fdi-wplogin #login .wp-pwd input[type="password"],
.fdi-wplogin #login .wp-pwd input[type="text"] {
	padding-right: 52px;
}

.fdi-wplogin #login .wp-pwd .button.wp-hide-pw {
	top: 12px;
	right: 10px;
	width: 32px;
	min-width: 32px;
	height: 32px;
	min-height: 32px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--fdi-navy);
}

/* Remember Me and LOGIN share one row, as in Figma. */
.fdi-wplogin #login .forgetmenot {
	float: left;
	margin: 10px 0 0;
}

.fdi-wplogin #login .forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.fdi-wplogin #login input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid var(--fdi-text);
	border-radius: 4px;
	box-shadow: none;
}

.fdi-wplogin #login input[type="checkbox"]:checked::before {
	margin: -1px 0 0 -1px;
	width: 22px;
	height: 22px;
}

.fdi-wplogin #login .submit {
	margin: 0;
	padding: 0;
}

.fdi-wplogin #login .button-primary {
	float: right;
	height: 42px;
	min-height: 42px;
	padding: 0 44px;
	border: 0;
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-teal);
	box-shadow: none;
	text-shadow: none;
	font: 700 18px/42px var(--fdi-font-heading);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--fdi-white);
}

.fdi-wplogin #login .button-primary:hover,
.fdi-wplogin #login .button-primary:focus {
	background: #00968f;
	color: var(--fdi-white);
	box-shadow: none;
}

.fdi-wplogin #login .button-primary:focus-visible {
	outline: 2px solid var(--fdi-navy);
	outline-offset: 2px;
}

/* Lost password and new password: one full-width button. */
.fdi-wplogin.login-action-lostpassword #login .button-primary,
.fdi-wplogin.login-action-retrievepassword #login .button-primary,
.fdi-wplogin.login-action-rp #login .button-primary,
.fdi-wplogin.login-action-resetpass #login .button-primary {
	float: none;
	width: 100%;
	margin-top: 4px;
}

/* "Generate Password" on the new-password screen. */
.fdi-wplogin #login .button:not(.button-primary):not(.wp-hide-pw) {
	height: 38px;
	min-height: 38px;
	padding: 0 20px;
	border: 2px solid var(--fdi-teal);
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-white);
	box-shadow: none;
	font: 700 15px/34px var(--fdi-font-heading);
	color: var(--fdi-teal);
}

.fdi-wplogin #login .description,
.fdi-wplogin #login .indicator-hint {
	font-size: 13px;
	color: var(--fdi-grey);
}

/* ============================================ Links under a dashed rule */
.fdi-wplogin #login #nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 32px 0;
	padding: 22px 0 0;
	border-top: 2px dashed #b9b9b9;
	font-size: 0; /* hides the " | " between links */
}

.fdi-wplogin #login #nav a {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 22px;
	border: 2px solid var(--fdi-teal);
	border-radius: var(--fdi-radius-pill);
	font: 700 18px/1 var(--fdi-font-heading);
	color: var(--fdi-teal);
	text-decoration: none;
}

.fdi-wplogin #login #nav a:hover,
.fdi-wplogin #login #nav a:focus {
	background: var(--fdi-teal);
	color: var(--fdi-white);
}

/* The header logo already links to the site. */
.fdi-wplogin #backtoblog,
.fdi-wplogin .privacy-policy-page-link {
	display: none;
}

/* ========================================================= Figures strip */
.fdi-wplogin .fdi-login-figures {
	box-sizing: border-box;
	display: flex;
	align-self: flex-start;
	width: 434px;
	max-width: calc(100% - 32px);
	margin: 30px 0 64px max(16px, calc((100% - 1200px) / 2));
	padding: 14px 10px;
	background: var(--fdi-teal);
	border-radius: 30px;
	box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.32);
	color: var(--fdi-white);
}

.fdi-wplogin .fdi-login-figure {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 4px 6px;
	text-align: center;
}

.fdi-wplogin .fdi-login-figure + .fdi-login-figure::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 0;
	width: 2px;
	background: rgba(255, 255, 255, 0.5);
}

.fdi-wplogin .fdi-login-figure__num {
	display: block;
	font: 700 48px/1 var(--fdi-font-body);
}

.fdi-wplogin .fdi-login-figure__label {
	display: block;
	margin-top: 6px;
	font: italic 700 17px/1.05 var(--fdi-font-heading);
	letter-spacing: 0.5px;
}

/* ================================================================ Phones */
@media (max-width: 600px) {
	body.login.fdi-wplogin {
		background-position: 62% top;
	}

	.fdi-wplogin .fdi-login-header__inner {
		padding: 14px 16px;
	}

	.fdi-wplogin .fdi-login-header__logo img {
		width: 170px;
	}

	.fdi-wplogin #login,
	.fdi-wplogin .fdi-login-figures {
		align-self: center;
		margin-left: auto;
		margin-right: auto;
	}

	.fdi-wplogin #login {
		margin-top: 24px;
		padding-bottom: 24px;
	}

	.fdi-wplogin #login h1 a {
		height: 150px;
	}

	.fdi-wplogin .fdi-login-title {
		margin: 22px 20px 14px;
		font-size: 26px;
	}

	.fdi-wplogin #login .message,
	.fdi-wplogin #login .notice,
	.fdi-wplogin #login #login_error {
		margin-left: 20px;
		margin-right: 20px;
	}

	.fdi-wplogin #login form {
		padding: 0 20px;
	}

	.fdi-wplogin #login .forgetmenot {
		float: none;
	}

	.fdi-wplogin #login .button-primary {
		float: none;
		width: 100%;
		margin-top: 14px;
	}

	.fdi-wplogin #login #nav {
		margin: 20px 20px 0;
	}

	.fdi-wplogin .fdi-login-figures {
		margin-top: 20px;
		margin-bottom: 32px;
	}

	.fdi-wplogin .fdi-login-figure__num {
		font-size: 34px;
	}

	.fdi-wplogin .fdi-login-figure__label {
		font-size: 13px;
	}
}

/* =====================================================================
 * 2. /login/ page (page 182). Figma "Student_Login/Home.png" at 1440. The
 * card sits on the left edge of the 1200px container; the photo stays full
 * bleed. Hero, card frame, banner and figures strip are Elementor.
 * ===================================================================== */

/* ===================================================================== Hero
 * Media 383 (1600x900). Figma draws it 1552x873 from x -1, 8px above the hero
 * top, so the man sits right of the card. The size is driven by the height:
 * 873px at 1440 (Figma), 60.63vw on wider windows (= 107.78% wide, so it still
 * covers), and hero height + 8px when an error notice or the reset-password
 * hints make the card (and so the hero) taller, so no flat band shows under it. */
.fdi-login-hero {
	background-color: #cfc9bd;
	background-image: url("../../../../uploads/2026/10/fdi-login-hero.jpg");
	background-repeat: no-repeat;
	background-position: -1px -8px;
	background-size: auto max(873px, calc(100% + 8px), 60.63vw);
}

@media (max-width: 767px) {
	.fdi-login-hero {
		background-position: 38% top;
		background-size: cover;
	}
}

/* ===================================================================== Card
 * 434x600, radius 30 (Elementor). Shadow fitted to the Figma pixels: about
 * 20% darker at the edge, gone 22px out, no offset. */
.fdi-login-card,
.fdi-login-stats {
	box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.32);
}

.fdi-login-card__banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================ Stats strip
 * 434x118 teal, radius 30. Cells 145 / 142 / 137 (+10 right padding), so the
 * centres land on Figma's 72.5 / 217.5 / 355.5. Dividers: 1px white lines on
 * half pixels in Figma, i.e. 2px at 50%, x 144..145 and 286..287, y 14..103.
 * (::after, because Elementor owns a container's ::before for overlays.) */
.fdi-login-stats .fdi-login-stat {
	position: relative;
	min-width: 0;
}

.fdi-login-stats .fdi-login-stat + .fdi-login-stat::after {
	content: "";
	position: absolute;
	top: 14px;
	left: -1px;
	width: 2px;
	height: 90px;
	background: rgba(255, 255, 255, 0.5);
}

/* Numbers: Open Sans 700 48px (kit fdistat is the 66px Home size). */
.fdi-login-stat__num .elementor-heading-title {
	font-size: 48px !important;
	line-height: 48px !important;
}

/* Labels: PT Serif 700 italic 17/17 with 0.5px tracking. */
.fdi-login-stat__label .elementor-heading-title {
	font-size: 17px !important;
	line-height: 17px !important;
	letter-spacing: 0.5px;
}

/* Figma sets the first line of cells 1 and 2 ("Years in", "Economies") 3px
 * right of centre; centred text moves by half the indent, and only line 1. */
.fdi-login-stats .fdi-login-stat:nth-child(-n+2) .fdi-login-stat__label .elementor-heading-title {
	text-indent: 6px;
}

/* ======================================================= Card title + form
 * Card content box 375px wide (padding 31 25 30 34). Title PT Serif 31px
 * teal; labels in a 95px column with 280x42 pill inputs; Remember Me and the
 * LOGIN pill on one row; a dashed rule 33px below; the "Lost your Password?"
 * pill 32px under the rule, right-aligned. */
.fdi-login-card .fdi-login-card__title.elementor-widget {
	margin: 2px 0 32px;
}

.fdi-login-card .fdi-login-card__title .elementor-heading-title {
	margin: 0;
	font-family: var(--fdi-font-heading);
	font-weight: 700;
	font-size: 31px;
	line-height: 1.2;
	color: var(--fdi-teal);
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-group {
	margin: 0;
	padding: 0;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-type-text,
.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-type-password {
	display: grid;
	grid-template-columns: 95px minmax(0, 1fr);
	align-items: center;
	width: 100%;
	margin-bottom: 23px;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-label {
	margin: 0;
	padding: 0;
	font-family: var(--fdi-font-body);
	font-weight: 600;
	font-size: 17px;
	color: var(--fdi-text);
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-textual {
	box-sizing: border-box;
	width: 100%;
	height: 42px;
	min-height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--fdi-text);
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-white);
	box-shadow: none;
	font-family: var(--fdi-font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--fdi-text);
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-textual:focus {
	border-color: var(--fdi-teal);
	box-shadow: 0 0 0 1px var(--fdi-teal);
	outline: 0;
}

/* Remember Me: the text, then the 24px box (Figma order). */
.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-remember-me {
	flex: 1 1 auto;
	width: auto;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-remember-me label {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 13px;
	margin: 0;
	font-family: var(--fdi-font-body);
	font-weight: 600;
	font-size: 17px;
	color: var(--fdi-text);
	cursor: pointer;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-remember-me input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--fdi-text);
	border-radius: 5px;
	background: var(--fdi-white);
	cursor: pointer;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-remember-me input[type="checkbox"]:checked {
	background: var(--fdi-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.3 7.2l4.2 5.4 7.1-9.3' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 3px 3px / 16px 16px no-repeat;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-remember-me input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--fdi-teal);
	outline-offset: 2px;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-type-submit {
	width: auto;
	margin-left: auto;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	min-height: 42px;
	min-width: 176px; /* Figma LOGIN pill 176x42 */
	padding: 0 28px 2px 20px;
	border: 0;
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-teal);
	box-shadow: none;
	font-family: var(--fdi-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--fdi-white);
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-button:hover,
.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-button:focus-visible {
	background: var(--fdi-navy);
	color: var(--fdi-white);
}

/* Links row: dashed rule (2px #B7B7B7, 5px dash / 5px gap), then the pill. */
.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-group:last-child:not(.elementor-field-type-submit) {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-top: 33px;
	padding-top: 34px;
	background: linear-gradient(90deg, #b7b7b7 50%, transparent 0) -2px 0 / 10px 2px repeat-x;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-lost-password,
.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-register {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 42px;
	padding: 0 20px;
	border: 2px solid var(--fdi-teal);
	border-radius: var(--fdi-radius-pill);
	font-family: var(--fdi-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1;
	color: var(--fdi-teal);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-lost-password:hover,
.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-lost-password:focus-visible {
	background: var(--fdi-teal);
	color: var(--fdi-white);
}

.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login-separator {
	display: none;
}

/* "You are now logged out." and the logged-in message. */
.fdi-login-card .fdi-login-card__form .fdi-login-notice,
.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login__logged-in-message {
	margin: 0 0 16px;
	padding: 10px 16px;
	border-radius: 14px;
	background: #e6f7f6;
	font-family: var(--fdi-font-body);
	font-size: 15px;
	line-height: 22px;
	color: var(--fdi-navy);
}

@media (max-width: 420px) {
	.fdi-login-card .fdi-login-card__title .elementor-heading-title {
		font-size: 26px;
	}

	.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-type-text,
	.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-type-password {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 8px;
	}

	.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-field-type-submit {
		width: 100%;
		margin: 16px 0 0;
	}

	.fdi-login-card .fdi-login-card__form.elementor-widget-login .elementor-login .elementor-button {
		width: 100%;
	}
}