/*
 * Inloggningen, ram 01 — wp-login.php omstylad.
 *
 * Elementors kit laddas inte på wp-login.php, så tokens finns inte som CSS
 * custom properties här. Värdena är därför literala, men hämtade ur
 * design/tokens.json och inget annat. Det är den enda filen i projektet där
 * det gäller, och skälet står här så nästa läsare inte tror att det är slarv.
 */

body.login {
	/* WP 7.1 färgar länkar, fokusringar och sina egna kontroller med
	   admin-temats variabler, i sin blå. Satta här följer allt WP ritar
	   med dem Eurocommercials färg, även det vi inte stylat ännu. */
	--wp-admin-theme-color: #03567d;            /* brand/700 */
	--wp-admin-theme-color-darker-10: #03567d;
	--wp-admin-theme-color-darker-20: #012c42;  /* primärknappens hover */
	background: #e3eef4;                 /* surface-accent */
	font-family: Inter, system-ui, sans-serif;
	/* WP:s login.css sätter `body, html { height: 100% }`, och body är
	   content-box: paddingen lades utanpå 900 px och gav 96 px scroll på en
	   sida som får plats. Höjden nollas, och min-height räknar av paddingen
	   (i mediefrågan med mobilens). */
	height: auto;
	min-height: calc(100vh - 96px);      /* 2 × 48 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;                  /* space-gap-2xl / space-gap-lg */
	margin: 0;
}

body.login #login {
	width: 100%;
	max-width: 600px;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;                           /* space-gap-lg. Var 48: meddelandet och länken under flöt för långt från kortet */
}

/* --- Ingen ordbild ---
   Loggan ovanför kortet togs bort 2026-10-19. Namnet står i kortets rubrik,
   «Eurocommercial Marknadsplan», och två märkningar av samma sak på en yta
   var en för mycket. WP:s logotyp-h1 döljs därför helt. Kortets rubrik är
   en h2: WP skriver redan ut sidans h1 för skärmläsare («Logga in»,
   «Glömt lösenord»). Direkt barn till #login: rubriken i kortet ligger i
   formuläret och träffas inte. */

body.login #login > h1,
body.login .wp-login-logo { display: none; }

/* --- Kortet --- */

body.login form {
	background: #ffffff;                 /* surface-primary */
	border: 1px solid #e4e8eb;           /* border-subtle */
	border-radius: 12px;                 /* radius-lg */
	padding: 48px;                       /* space-inset-xl */
	margin: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	gap: 24px;                           /* space-gap-lg */
}

/* order: -1 flyttar blocket till toppen av formulärets flexkolumn. Markupen
   kommer från login_form, som löser ut före submit-knappen — wp-login.php har
   ingen hook högre upp inuti formuläret. */
.ecm-login__intro { order: -1; display: flex; flex-direction: column; gap: 8px; }

.ecm-login__titel {
	margin: 0;
	text-wrap: balance;                  /* två jämna rader i mobil, inte ett ensamt ord */
	font-size: 2rem;                     /* heading-xl 32/38 */
	font-weight: 600;
	line-height: 1.1875em;
	color: #0f1720;                      /* text-primary */
}

.ecm-login__text {
	margin: 0;
	font-size: 1rem;                     /* text-md 16/26 */
	line-height: 1.625em;
	color: #3f4a55;                      /* text-body */
}

/* --- Fälten --- */

body.login form p,
body.login form .user-pass-wrap {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;                            /* space-gap-xs, 6 i Figma snappat */
}

body.login form label {
	font-size: 0.875rem;                 /* text-label 14/20 */
	font-weight: 600;
	line-height: 1.4286em;
	color: #0f1720;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="tel"],
body.login input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	/* WP ger #user_pass margin: 0 6px 16px 0. Hogermarginalen gjorde
	   losenordsfaltet 6px smalare an e-postfaltet, bottenmarginalen lade 16px
	   under det. Bada nollas har. */
	margin: 0;
	padding: 12px 16px;                  /* 14 i Figma snappat till 16 */
	border: 1px solid #c9d0d6;           /* border-strong */
	border-radius: 8px;                  /* radius-md */
	background: #ffffff;
	font-size: 1rem;
	line-height: 1.5em;
	color: #0f1720;
	box-shadow: none;
	min-height: 0;
}

body.login input::placeholder { color: #6b7681; }

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="tel"]:focus,
body.login input[type="number"]:focus {
	border-color: #1b79a8;               /* border-focus */
	box-shadow: 0 0 0 3px rgba(27, 121, 168, 0.18);
	outline: none;
}

/* Lösenordsfältet är ett grid, inte en flexrad. På «Nytt lösenord»
   (inbjudan och återställning) ligger WP:s styrkemätare i samma .wp-pwd
   som fältet och ögat. I en flexrad hamnade den bredvid fältet, och ögat,
   som var absolut mot hela .wp-pwd, följde med ner till mätaren.

   Rad 1: fältet över båda kolumnerna, ögat ovanpå i den högra.
   Rad 2: mätaren. Finns den inte (inloggningen) blir raden tom. */
body.login .wp-pwd {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	row-gap: 8px;                        /* space-gap-xs, som etikett mot fält */
}
body.login .wp-pwd > input { grid-area: 1 / 1 / 2 / 3; padding-inline-end: 48px; }

/* Ögat: WP ger knappen fast höjd 40 px, och fältet är 50. Knappen ligger i
   fältets grid-cell och sträcks till dess höjd, så ikonen centreras mot
   fältet och inte mot raden. Ikonen står 16 px från fältets kant, samma
   som texten. */
body.login .wp-pwd .button.wp-hide-pw {
	grid-area: 1 / 2 / 2 / 3;
	position: relative;
	z-index: 1;
	align-self: stretch;
	height: auto;
	min-height: 0;
	width: auto;
	margin: 0 4px 0 0;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	box-shadow: none;
	color: #6b7681;
	cursor: pointer;
}
body.login .wp-pwd .button.wp-hide-pw:hover { color: #03567d; }

/* --- Knappen --- */

body.login .submit,
body.login p.submit { margin: 0; }

body.login .button-primary,
body.login #wp-submit {
	width: 100%;
	height: auto;
	padding: 14px 20px;
	border: 0;
	border-radius: 8px;                  /* radius-md */
	background: #03567d;                 /* surface-action-primary */
	color: #ffffff;                      /* text-action-primary */
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
body.login .button-primary:hover,
body.login #wp-submit:hover { background: #012c42; }

/* Designen visar ingen kryssruta. Den döljs inte — att ta bort en nyttig
   funktion för att matcha en skiss är sämre — men den tonas ned. */
body.login .forgetmenot {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}
body.login .forgetmenot label {
	font-size: 0.8125rem;
	font-weight: 400;
	color: #6b7681;
}

/* Kryssrutan: WP vaxlar 16 -> 25px vid 782, en brytpunkt vi inte ager, sa
   storleken hoppade i intervallet 600-782. Satt explicit i stallet. 24px pa
   touch ar WCAG 2.5.8:s minsta trafferyta och behalls darfor - etiketten ar
   kopplad med for-attributet, sa hela raden ar klickbar i bada fallen. */
body.login .forgetmenot input[type="checkbox"],
body.login .pw-weak input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	min-width: 0;
	margin: 0;
	border: 1px solid #c9d0d6;           /* border-strong, som fälten */
	border-radius: 4px;                  /* radius-sm */
	background: #ffffff;
	box-shadow: none;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
}

/* Ikryssat läge. WP sätter appearance: none och ritar en egen bocka i
   ::before med sin blå (#3582c4), så accent-color gör ingenting här.
   Fylld ruta i brand/700 med vit bocka, samma färg som knappen. */
body.login .forgetmenot input[type="checkbox"]:checked,
body.login .pw-weak input[type="checkbox"]:checked {
	border-color: #03567d;               /* brand/700 */
	background: #03567d;
}
body.login .forgetmenot input[type="checkbox"]:checked::before,
body.login .pw-weak input[type="checkbox"]:checked::before {
	content: "";
	float: none;
	/* Fasta mått: procent löses inte i en inputs ::before (blev 0 px). */
	width: 14px;
	height: 14px;
	margin: 0;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.login .forgetmenot input[type="checkbox"]:focus,
body.login .pw-weak input[type="checkbox"]:focus { box-shadow: none; outline: none; }
body.login .forgetmenot input[type="checkbox"]:focus-visible,
body.login .pw-weak input[type="checkbox"]:focus-visible {
	outline: 2px solid #03567d;
	outline-offset: 2px;
}

/* --- Länkarna under kortet --- */

body.login #nav,
body.login #backtoblog {
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Sprakvaljaren doljs i markup via login_display_language_dropdown, men
   doljs aven har for sakerhets skull: verktyget ar helsvenskt. */
body.login .language-switcher,
body.login #language-switcher { display: none; }


body.login #nav a,
body.login #backtoblog a {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4286em;
	color: #03567d;                      /* text-accent */
	text-decoration: none;
}
/* WP sätter en egen blå på :hover och :focus (#135e96). Färgen står kvar,
   bara understrykningen tillkommer: hovern byter aldrig textfärg. */
body.login #nav a:hover,
body.login #backtoblog a:hover { color: #03567d; text-decoration: underline; }

/* WP:s fokusring (box-shadow i #2271b1) syntes vid varje klick. Den tas bort
   på :focus. Vid tangentbordsfokus står en ring i brand/700 kvar, annars
   ser den som tabbar inte var hen är. */
body.login #nav a:focus,
body.login #backtoblog a:focus { color: #03567d; box-shadow: none; outline: none; }
body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible {
	outline: 2px solid #03567d;
	outline-offset: 2px;
	border-radius: 2px;
}
body.login #backtoblog { display: none; }

/* --- Meddelanden och fel --- */

body.login #login_error,
body.login .message,
body.login .notice {
	box-sizing: border-box;
	margin: 0;
	padding: 12px 16px;
	border: 0;
	border-radius: 12px;                 /* radius-lg, som kortet */
	background: #fdf0e4;                 /* surface-status-forsenad */
	color: #9a4a15;                      /* text-status-forsenad */
	font-size: 0.875rem;
	line-height: 1.4286em;
	box-shadow: none;
}

/* Länkar i rutorna, till exempel «Logga in» efter att ett lösenord satts.
   Understrukna eftersom de står i löptext. Färgen står kvar på hover, och
   ringen syns bara vid tangentbordsfokus. */
body.login #login_error a,
body.login .message a,
body.login .notice a {
	color: #03567d;                      /* text-accent */
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.login #login_error a { color: inherit; }   /* felrutans röda, inte blått på rött */
body.login .message a:hover,
body.login .notice a:hover { color: #03567d; text-decoration-thickness: 2px; }
body.login #login_error a:hover { color: inherit; text-decoration-thickness: 2px; }
body.login #login_error a:focus,
body.login .message a:focus,
body.login .notice a:focus { box-shadow: none; outline: none; }
body.login #login_error a:focus-visible,
body.login .message a:focus-visible,
body.login .notice a:focus-visible { outline: 2px solid #03567d; outline-offset: 2px; border-radius: 2px; }

body.login #login_error {
	background: #fbe9e7;
	color: #b3261e;                      /* text-error, formulärvalidering */
}

/* Neutral, inte gron: WP anvander .message bade for instruktioner ("ange din
   e-post") och for bekraftelser. Gront lases som att nagot redan lyckats,
   vilket ar fel i halften av fallen. */
body.login .message {
	background: #f4f8fa;                 /* surface-muted */
	color: #3f4a55;                      /* text-body. Var #2d4653, som inte är någon token */
	border: 1px solid #d3e1e9;           /* border-default */
}

/* --- Hjalpmarket vid "Hall mig inloggad" ---
   WP 7.1 lagger en toggletip dar, med en riktig sakerhetsnotis: anvand bara
   pa egna enheter. Innehallet ar vart att ha kvar, sa det stylas i stallet
   for att doljas. Dashicons ar WP:s egen ikonfont pa inloggningssidan - inte
   ett glyftecken i text, sa designsystemets ikonregel gors ingen vald pa. */

body.login .wp-tooltip { display: inline-flex; align-items: center; }

body.login .wp-tooltip__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #5c7a8a;                      /* text-muted */
	cursor: pointer;
}
body.login .wp-tooltip__toggle:hover { color: #03567d; }
body.login .wp-tooltip__toggle:focus-visible {
	outline: 2px solid #03567d;
	outline-offset: 2px;
}
body.login .wp-tooltip__toggle .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	line-height: 1;
}

body.login .wp-tooltip__bubble {
	box-sizing: border-box;
	max-width: 320px;
	/* Hoger sida gor plats for stangkrysset, som ligger absolut i bubblan. */
	padding: 12px 40px 12px 16px;
	border: 1px solid #d3e1e9;           /* border-default */
	border-radius: 8px;
	background: #ffffff;
	color: #2d4653;                      /* text-secondary */
	font-size: 0.8125rem;
	line-height: 1.5385em;
	box-shadow: 0 4px 12px rgba(3, 86, 125, 0.12);
}
body.login .wp-tooltip__close {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	padding: 4px;
	border: 0;
	background: transparent;
	color: #5c7a8a;
	cursor: pointer;
}
body.login .wp-tooltip__close .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

/* --- Tvastegsverifieringen (WP 2FA) ---
   Plugin:et renderar sina steg pa wp-login.php, sa de arver kortet harifran.
   Fyra saker traffar det inte automatiskt.

   1. Kodfaltet ar type="tel" (klass-login.php rad 1268), tackt ovan.
   2. Plugin:et skriver ut en inline <style> SIST i sin utmatning med
      `#login form > p { margin-bottom: 15px }`. Den kommer efter var fil i
      dokumentordning och bar en id-selektor, sa den slar var `form p`-reset.
      Selektorn nedan ar (1,2,1) mot deras (1,1,1).
   3. Aterskicka-kod och "gor det senare" ar sekundarknappar utan egen stil.
   4. `.backup-methods-wrap` bar inline `padding: 0 24px` som inte foljer
      kortets indrag. */

body.login #login form > p,
body.login #login form > div { margin-bottom: 0; }

body.login .wp-2fa-login-wrapper,
body.login .wp-2fa-login-standard {
	display: flex;
	flex-direction: column;
	gap: 24px;                           /* space-gap-lg */
}

body.login .wp-2fa-email-resend { margin: 0; }

/* Verifieringssteget har tva vagar vidare: logga in med koden, eller be om en
   ny. De ar ett val, inte tva steg, sa de star ihop med 12 px medan resten av
   formuläret andas 24. Elementet sätts av skriptet i class-login.php -
   wp-2fa skriver knapparna som tva syskon rakt i flexkolumnen. */
body.login .ecm-login__knappar {
	display: flex;
	flex-direction: column;
	gap: 12px;                           /* space-gap-sm */
	margin: 0;
}

body.login input.button:not(.button-primary):not(#wp-submit),
body.login a.button-secondary {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	padding: 13px 20px;                  /* 14 minus kanten: samma höjd som primärknappen */
	border: 1px solid #c9d0d6;           /* border-strong */
	border-radius: 8px;                  /* radius-md */
	background: #ffffff;
	color: #03567d;                      /* text-accent */
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
body.login input.button:not(.button-primary):not(#wp-submit):hover,
body.login a.button-secondary:hover {
	border-color: #03567d;
	background: #f4f8fa;                 /* surface-muted */
}

body.login .backup-methods-wrap {
	margin: 0;
	padding: 0;
}
body.login .backup-methods-wrap a {
	font-size: 0.875rem;
	font-weight: 500;
	color: #03567d;                      /* text-accent */
}
body.login .backup-methods-wrap a:hover { text-decoration: underline; }

body.login .wp-2fa-error-msg { font-weight: 600; }

/* --- Nytt lösenord: styrkemätaren och «Generera lösenord» --- */

/* Mätaren som en statusrad under fältet, i verktygets statusfärger i
   stället för WP:s. Svagt är varm orange (status försenad) och inte
   larmrött: det är ett råd, inte ett fel. */
body.login #pass-strength-result {
	grid-area: 2 / 1 / 3 / 3;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;                  /* radius-md */
	background: #f1f4f6;                 /* surface-status-installd */
	color: #6b7681;                      /* text-status-installd */
	font-size: 0.875rem;                 /* text-label 14/20 */
	font-weight: 600;
	line-height: 1.4286em;
	text-align: start;
	opacity: 1;
}
body.login #pass-strength-result.short,
body.login #pass-strength-result.bad { background: #fdeee7; color: #b3341a; }     /* status försenad */
body.login #pass-strength-result.good { background: #fff4e0; color: #8a5a00; }    /* status pågående */
body.login #pass-strength-result.strong { background: #e6f4ec; color: #17663f; }  /* success */

/* WP färgar även fältets kant efter styrkan. Mätaren säger det redan;
   fältet behåller sin vanliga kant och fokusring. */
body.login #pass1.short,
body.login #pass1.bad,
body.login #pass1.good,
body.login #pass1.strong { border-color: #c9d0d6; }  /* border-strong. WP:s regel bär id */
body.login #pass1:focus { border-color: #1b79a8; }   /* border-focus */

/* WP:s <br class="clear"> före knapparna blev ett eget flexbarn och lade
   ett tomt steg med två gap runt sig. */
body.login #resetpassform br.clear { display: none; }

body.login #resetpassform .indicator-hint {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5385em;
	color: #6b7681;                      /* text-secondary */
}

/* Två vägar vidare, som verifieringssteget: generera eller spara. Ett val,
   så 12 px emellan. */
body.login .reset-pass-submit {
	display: flex;
	flex-direction: column;
	gap: 12px;                           /* space-gap-sm */
	margin: 0;
}

/* «Generera lösenord» är en <button>, inte en <input>, så regeln för
   sekundärknappar ovan nådde den inte, och WP:s blå knapp stod kvar.
   #resetpassform ger id-specificitet över WP:s .wp-core-ui .button:hover. */
body.login #resetpassform .wp-generate-pw {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 13px 20px;                  /* 14 minus kanten: samma höjd som primärknappen */
	border: 1px solid #c9d0d6;           /* border-strong */
	border-radius: 8px;                  /* radius-md */
	background: #ffffff;
	color: #03567d;                      /* text-accent */
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}
body.login #resetpassform .wp-generate-pw:hover {
	border-color: #03567d;
	background: #f4f8fa;                 /* surface-muted */
	color: #03567d;
}
body.login #resetpassform .wp-generate-pw:focus { box-shadow: none; outline: none; color: #03567d; }
body.login #resetpassform .wp-generate-pw:focus-visible { outline: 2px solid #03567d; outline-offset: 2px; }

/* «Bekräfta användning av svagt lösenord» är samma kryssruta som «Håll mig
   inloggad», men raden har ingen layout av sig själv. */
body.login .pw-weak { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
body.login .pw-weak label { font-size: 0.8125rem; font-weight: 400; color: #6b7681; }

/* --- Under 600 --- */

@media (max-width: 600px) {
	body.login { padding: 24px 16px; min-height: calc(100vh - 48px); }   /* 2 × 24 */
	body.login form { padding: 24px; border-radius: 12px; }
	body.login .ecm-login__titel { font-size: 1.5rem; }    /* heading-xl, mobil */
	body.login .forgetmenot input[type="checkbox"] { width: 24px; height: 24px; }
	body.login .forgetmenot input[type="checkbox"]:checked::before { width: 16px; height: 16px; }
}