/* ==========================================================================
   CONT: PAGINA DE AUTENTIFICARE

   Formularul e cel al WordPress-ului, prin `wp_login_form()`, randat de
   mu-plugin-ul `pmi-cont.php`. Nu e al Paid Memberships Pro: plugin-ul ăla nu
   restricționează azi nicio pagină și urmează să iasă, iar pagina de
   autentificare nu are de ce să iasă odată cu el.

   Layout după pagina de autentificare de pe pmi.org: fără navigație, un singur
   card centrat pe fundal crem, cu logo-ul înăuntru.
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. PAGINA

   Ca pe pmi.org: fără navigație, un singur card centrat pe fundalul crem, cu
   logo-ul înăuntru. Nimic altceva pe ecran. E singura pagină a site-ului unde
   vizitatorul are exact o treabă de făcut, iar meniul nu l-ar ajuta cu ea.

   Antetul e scos din pagină prin „Disable Elements" din GP Premium, nu din CSS:
   ascuns cu `display: none`, ar fi fost tot descărcat și tot randat.
   -------------------------------------------------------------------------- */
.pmi-cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pmi-sp-5);
	padding-block: var(--pmi-sp-7) var(--pmi-sp-10);
	max-inline-size: none;
}

/* Butonul de întoarcere. Fără navigație, e singura ieșire din pagină în afară
   de butonul „înapoi" al browserului. */
.pmi-cont__inapoi {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--pmi-sp-2);
	min-block-size: 44px;
	padding-inline: var(--pmi-sp-5);
	border: 1px solid var(--pmi-ink);
	border-radius: var(--pmi-raza-plin);
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
	text-decoration: none;
	transition: background-color var(--pmi-tranzitie), color var(--pmi-tranzitie);
}

.pmi-cont__inapoi::before {
	content: "←";
	font-size: 1.1em;
	line-height: 1;
}

.pmi-cont__inapoi:hover {
	background-color: var(--pmi-ink);
	color: var(--pmi-alb);
}

.pmi-cont__card {
	inline-size: 100%;
	max-inline-size: 640px;
	background-color: var(--pmi-fundal-card);
	border-radius: var(--pmi-raza-xl);
	padding: var(--pmi-sp-8) var(--pmi-sp-9);
	text-align: center;
}

.pmi-cont__logo {
	inline-size: 200px;
	block-size: auto;
	margin-inline: auto;
	margin-block-end: var(--pmi-sp-6);
}

.pmi-cont__card h1 {
	font-size: var(--pmi-text-2xl);
	line-height: var(--pmi-lh-2xl);
	font-weight: var(--pmi-greutate-titlu);
	margin: 0 0 var(--pmi-sp-3);
	color: var(--pmi-ink);
}

.pmi-cont__intro {
	margin: 0 0 var(--pmi-sp-2);
	color: var(--pmi-text-secundar);
	max-inline-size: none;
}

.pmi-cont__nou {
	margin: 0 0 var(--pmi-sp-6);
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
	max-inline-size: none;
}

.pmi-cont__nou a {
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-link);
}

/* --------------------------------------------------------------------------
   2. FORMULARUL

   Câmpurile au colț mic, butonul e pastilă. Nu e o scăpare, e chiar tiparul de
   pe pmi.org: forma rotundă e rezervată acțiunii, ca ochiul să o găsească fără
   să citească. Câmpuri la fel de rotunjite ar fi anulat diferența.
   -------------------------------------------------------------------------- */
/* Ordinea elementelor se stabilește aici, nu în PHP.

   Cloudflare Turnstile nu-și scrie caseta în marcajul trimis de server, ci și-o
   inserează singur cu JavaScript, după încărcare, imediat sub câmpul parolei.
   Orice ordine aranjată în PHP e refăcută de el. Cu `order`, ordinea vizuală
   rămâne a noastră indiferent unde aterizează caseta lui. */
.pmi-cont form {
	display: flex;
	flex-direction: column;
	text-align: start;
}

.pmi-cont .login-username { order: 1; }
.pmi-cont .login-password { order: 2; }
.pmi-cont__uitat          { order: 3; }
.pmi-cont .cf-turnstile   { order: 4; }
.pmi-cont .login-remember { order: 5; }
.pmi-cont .login-submit   { order: 6; }

.pmi-cont .login-username {
	margin-block-end: var(--pmi-sp-5);
}

/* Parola și linkul de sub ea sunt o pereche: spațiul mare vine după link, nu
   între ele. */
.pmi-cont .login-password {
	margin-block-end: var(--pmi-sp-2);
}

.pmi-cont label {
	display: block;
	margin-block-end: var(--pmi-sp-2);
	font-size: var(--pmi-text-xs);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-cont input[type="text"],
.pmi-cont input[type="password"],
.pmi-cont input[type="email"] {
	inline-size: 100%;
	min-block-size: 48px;
	padding: var(--pmi-sp-3) var(--pmi-sp-4);
	border: 1px solid var(--pmi-neutral-300);
	border-radius: var(--pmi-raza-xs);
	background-color: var(--pmi-alb);
	color: var(--pmi-text);
	/* 16 px, nu mai puțin: sub atât, Safari pe iPhone mărește pagina singur în
	   clipa în care atingi câmpul, și omul se trezește cu formularul tăiat. */
	font-size: var(--pmi-text-sm);
	font-family: inherit;
}

.pmi-cont input:focus {
	border-color: var(--pmi-violet-500);
}

.pmi-cont .login-remember label {
	display: flex;
	align-items: center;
	gap: var(--pmi-sp-2);
	font-weight: var(--pmi-greutate-text);
	color: var(--pmi-text-secundar);
	font-size: var(--pmi-text-xs);
}

.pmi-cont .login-remember input {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	accent-color: var(--pmi-violet-500);
}

/* Linkul de parolă uitată stă sub câmpul parolei, ca pe pmi.org, nu la subsolul
   formularului. Acolo îl caută cine tocmai a greșit-o. */
.pmi-cont__uitat {
	margin: 0 0 var(--pmi-sp-5);
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
}

.pmi-cont__uitat a {
	color: var(--pmi-text-secundar);
	text-decoration: none;
}

.pmi-cont__uitat a:hover {
	color: var(--pmi-link);
	text-decoration: underline;
}

.pmi-cont .login-submit {
	margin-block-start: var(--pmi-sp-6);
	text-align: center;
}

.pmi-cont #wp-submit {
	inline-size: 100%;
	max-inline-size: 320px;
	min-block-size: 48px;
	padding-inline: var(--pmi-sp-6);
	border: 0;
	border-radius: var(--pmi-raza-plin);
	background-color: var(--pmi-ink);
	color: var(--pmi-alb);
	font-family: inherit;
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
	cursor: pointer;
	transition: background-color var(--pmi-tranzitie);
}

.pmi-cont #wp-submit:hover {
	background-color: var(--pmi-violet-500);
}

/* Turnstile își pune singur `margin-left: -15px` printr-o etichetă `style` în
   mijlocul formularului, calculată pentru ecranul de login al WordPress-ului.
   Aici ar scoate caseta din coloană. */
.pmi-cont .cf-turnstile {
	margin: var(--pmi-sp-5) 0 0 0 !important;
	display: flex;
	justify-content: center;
}

.pmi-cont .cf-turnstile-br {
	display: none;
}

/* --------------------------------------------------------------------------
   3. MESAJE ȘI STAREA DE CONECTAT
   -------------------------------------------------------------------------- */
.pmi-cont__mesaj {
	margin: 0 0 var(--pmi-sp-5);
	padding: var(--pmi-sp-3) var(--pmi-sp-4);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-sm);
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	text-align: start;
	max-inline-size: none;
}

.pmi-cont__mesaj--eroare {
	border-color: var(--pmi-eroare);
	color: var(--pmi-eroare);
}

.pmi-cont__mesaj--info {
	border-color: var(--pmi-aqua-400);
	color: var(--pmi-aqua-600);
}

.pmi-cont__actiuni {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--pmi-sp-4);
	margin-block-end: 0;
}

.pmi-cont__iesire {
	font-size: var(--pmi-text-xs);
	color: var(--pmi-text-secundar);
}

/* --------------------------------------------------------------------------
   4. ECRANE MICI
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.pmi-cont {
		padding-block-start: var(--pmi-sp-5);
	}

	.pmi-cont__card {
		padding: var(--pmi-sp-6) var(--pmi-sp-5);
		border-radius: var(--pmi-raza-lg);
	}

	.pmi-cont__card h1 {
		font-size: var(--pmi-text-xl);
		line-height: var(--pmi-lh-xl);
	}

	.pmi-cont #wp-submit {
		max-inline-size: none;
	}
}

/* --------------------------------------------------------------------------
   5. ÎNREGISTRARE ȘI CONTUL MEU
   -------------------------------------------------------------------------- */

/* Contul are mai mult de citit decât un formular de autentificare, deci cardul
   se lărgește. Autentificarea rămâne îngustă: acolo lățimea mare ar face
   câmpurile să pară un chestionar. */
.pmi-cont--larg .pmi-cont__card {
	max-inline-size: 820px;
	text-align: start;
}

.pmi-cont__optional {
	font-weight: var(--pmi-greutate-text);
	color: var(--pmi-text-secundar);
}

/* Câmpul-capcană pentru roboți. Ascuns din CSS, nu din atributul `hidden`:
   un robot care citește marcajul vede „hidden" și îl ocolește. */
.pmi-cont__capcana {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pmi-cont__salut {
	margin: 0 0 var(--pmi-sp-5);
	font-size: var(--pmi-text-md);
	max-inline-size: none;
}

.pmi-cont__stare {
	display: inline-flex;
	flex-direction: column;
	gap: var(--pmi-sp-1);
	padding: var(--pmi-sp-3) var(--pmi-sp-5);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-neutral-100);
	margin-block-end: var(--pmi-sp-6);
}

.pmi-cont__stare--membru {
	background-color: var(--pmi-violet-50);
}

.pmi-cont__eticheta {
	margin: 0;
	font-size: var(--pmi-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-violet-500);
}

.pmi-cont__id {
	margin: 0;
	font-size: var(--pmi-text-md);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-cont__card h2 {
	font-size: var(--pmi-text-lg);
	line-height: var(--pmi-lh-lg);
	font-weight: var(--pmi-greutate-titlu);
	margin: var(--pmi-sp-7) 0 var(--pmi-sp-4);
	color: var(--pmi-ink);
}

.pmi-cont__avantaje {
	list-style: none;
	margin: 0 0 var(--pmi-sp-6);
	padding: 0;
	display: grid;
	gap: var(--pmi-sp-3);
	max-inline-size: none;
}

.pmi-cont__avantaje li {
	margin: 0;
	padding-inline-start: var(--pmi-sp-6);
	position: relative;
	color: var(--pmi-text-secundar);
}

/* Bifa e o bordură rotită, nu un caracter: nu depinde de font și nu se
   transformă în pătrat pe sistemele care n-au emoji. */
.pmi-cont__avantaje li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 0.45em;
	inline-size: 6px;
	block-size: 11px;
	border-inline-end: 2px solid var(--pmi-violet-500);
	border-block-end: 2px solid var(--pmi-violet-500);
	transform: rotate(45deg);
}

.pmi-cont__avantaje strong {
	color: var(--pmi-ink);
}

/* Formularul de PMI ID e o completare, nu treaba principală a paginii: câmpul
   nu se întinde pe toată lățimea cardului. */
.pmi-cont__id-form {
	max-inline-size: 340px;
}

.pmi-cont__id-form .login-submit,
.pmi-cont__inregistrare .login-submit {
	text-align: start;
}

.pmi-cont__id-form #wp-submit,
.pmi-cont__resetare #wp-submit,
.pmi-cont__inregistrare #wp-submit {
	max-inline-size: none;
}

.pmi-cont--larg .login-submit {
	text-align: start;
}

/* --------------------------------------------------------------------------
   7. INSIGNELE

   Trei stări: board, membru PMI, utilizator. Prima nu se poate deduce din
   nimic automat, fiindcă e o funcție în filiala din România, nu ceva ce vine
   din exportul PMI; se bifează în profilul din administrare.

   „Utilizator" nu e un premiu de consolare. E starea în care ajunge oricine
   cumpără o carte fără să fie membru, iar pagina trebuie să știe să i se
   adreseze, nu să-l trateze ca pe un membru stricat.
   -------------------------------------------------------------------------- */
.pmi-insigne {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmi-sp-2);
	margin: 0 0 var(--pmi-sp-5);
}

.pmi-insigna {
	display: inline-flex;
	align-items: center;
	padding: var(--pmi-sp-1) var(--pmi-sp-4);
	border-radius: var(--pmi-raza-plin);
	font-size: var(--pmi-text-2xs);
	font-weight: var(--pmi-greutate-accent);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Boardul primește violetul plin, nu o nuanță de fundal: e singura insignă pe
   care nu și-o poate da nimeni singur. */
.pmi-insigna--board {
	background-color: var(--pmi-ink);
	color: var(--pmi-text-pe-inchis);
}

.pmi-insigna--membru {
	background-color: var(--pmi-aqua-50);
	color: var(--pmi-aqua-600);
}

.pmi-insigna--utilizator {
	background-color: var(--pmi-neutral-100);
	color: var(--pmi-text-secundar);
}

/* --------------------------------------------------------------------------
   8. CÂND EXPIRĂ

   Rândul lipsește cu totul până când exportul aduce data. Un „nu știm până
   când" sub fiecare cont ar fi zgomot, nu informație.
   -------------------------------------------------------------------------- */
.pmi-cont__expira {
	margin: 0;
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text-secundar);
}

.pmi-cont__expira--curand,
.pmi-cont__expira--trecut {
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

/* --------------------------------------------------------------------------
   9. DESCĂRCĂRI ȘI COMENZI

   Descărcările stau înaintea comenzilor fiindcă ele sunt motivul real pentru
   care cineva se întoarce în cont: „unde e cartea pe care am luat-o?".

   Nota de sub fiecare vine de la produs. Acolo stă, de pildă, parola fișierului
   PMBOK, care până acum se găsea doar în emailul de confirmare; cine îl pierdea
   ne scria nouă.
   -------------------------------------------------------------------------- */
.pmi-cont__descarcari,
.pmi-cont__comenzi {
	list-style: none;
	margin: 0 0 var(--pmi-sp-6);
	padding: 0;
	display: grid;
	gap: var(--pmi-sp-4);
}

.pmi-cont__descarcari > li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pmi-sp-3);
}

.pmi-cont__nota {
	padding: var(--pmi-sp-3) var(--pmi-sp-4);
	border-radius: var(--pmi-raza-md);
	background-color: var(--pmi-neutral-100);
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text);
}

.pmi-cont__nota p {
	margin: 0;
}

.pmi-cont__nota p + p {
	margin-block-start: var(--pmi-sp-2);
}

.pmi-cont__comenzi > li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pmi-sp-2) var(--pmi-sp-5);
	padding-block-end: var(--pmi-sp-3);
	border-block-end: 1px solid var(--pmi-linie);
	font-size: var(--pmi-text-sm);
	color: var(--pmi-text-secundar);
}

.pmi-cont__comenzi a {
	color: var(--pmi-ink);
}

/* --------------------------------------------------------------------------
   10. CE ADUCE WOOCOMMERCE

   Comenzile, descărcările și adresele se desenează pe adrese de tipul
   `/contul-meu/comenzi/`. Acolo randează WooCommerce, cu navigația lui. Aici
   îi potrivim doar lățimea și tabelele, ca să nu iasă din card.
   -------------------------------------------------------------------------- */
.pmi-cont__card .woocommerce-MyAccount-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmi-sp-2) var(--pmi-sp-5);
	margin: 0 0 var(--pmi-sp-6);
	padding: 0 0 var(--pmi-sp-4);
	border-block-end: 1px solid var(--pmi-linie);
}

.pmi-cont__card .woocommerce-MyAccount-navigation a {
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-text-secundar);
	text-decoration: none;
}

.pmi-cont__card .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--pmi-ink);
}

.pmi-cont__card .woocommerce-orders-table,
.pmi-cont__card .woocommerce-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--pmi-text-sm);
}

.pmi-cont__card :where(.woocommerce-orders-table, .woocommerce-table) :where(th, td) {
	padding: var(--pmi-sp-3);
	text-align: start;
	border-block-end: 1px solid var(--pmi-linie);
}

/* --------------------------------------------------------------------------
   11. PAGINA DE CONT ARE MENIU

   Autentificarea, înregistrarea și resetarea rămân fără navigație: acolo omul
   are exact o treabă de făcut, iar meniul nu l-ar ajuta cu ea.

   Contul e altceva. De când ține comenzile, descărcările și datele de facturare,
   e un loc din care se pleacă mai departe, nu o fundătură. Fără meniu, singura
   ieșire era butonul „înapoi" al browserului.
   -------------------------------------------------------------------------- */
.pmi-cont--cu-meniu {
	padding-block-start: var(--pmi-sp-8);
}

/* Butonul de întoarcere nu-și mai are rostul: meniul e deasupra. */
.pmi-cont--cu-meniu .pmi-cont__inapoi {
	display: none;
}

/* --------------------------------------------------------------------------
   12. SCHIMBAREA PMI ID-ULUI

   Închis, fiindcă e o operație rară. Deschis, ar cere o decizie de la cineva
   care n-are ce corecta.
   -------------------------------------------------------------------------- */
.pmi-cont__schimba {
	margin-block-start: var(--pmi-sp-7);
	padding-block-start: var(--pmi-sp-5);
	border-block-start: 1px solid var(--pmi-linie);
}

.pmi-cont__schimba summary {
	cursor: pointer;
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-text-secundar);
}

.pmi-cont__schimba summary:hover,
.pmi-cont__schimba[open] summary {
	color: var(--pmi-ink);
}

.pmi-cont__schimba > p {
	margin-block: var(--pmi-sp-3);
	max-inline-size: 60ch;
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text-secundar);
}