/* =========================================================================
   Inco Plus Dashboard — „Contul meu" în designul IncoPlus
   Valorile vin 1:1 din Figma „Dasjboard - 1440px" #18373:11553.

   Namespace: .inco-dash*  ·  variabile: --inco-dash-*
   Nu se suprapun nici cu Inco Plus (--inco-*, .inco-product-card…), nici cu
   Inco Plus Checkout (--inco-co-*, .inco-order…). Cele trei pluginuri rulează
   simultan pe același site.

   ⚠️ CITEȘTE SECȚIUNEA „BLINDAJ" DE LA FINAL înainte de a simplifica vreun
   selector cu clasa dublată. Nu sunt greșeli de scriere.
   ========================================================================= */

.inco-dash {
	/*
	 * 🔴 Paleta vine din TOKENII SITE-ULUI, nu din copii locale.
	 *
	 * Erau nouă culori scrise direct aici. Valorile coincideau cu ale noastre —
	 * dar erau copii: la prima schimbare de token, pagina asta n-ar mai fi
	 * urmat-o, iar nimeni n-ar fi observat până când „Contul meu" ar fi arătat
	 * altfel decât restul site-ului.
	 *
	 * Rezerva de după virgulă rămâne, ca modulul să funcționeze și dacă e rulat
	 * fără foaia de tokeni *(o variabilă nedefinită invalidează toată
	 * declarația, nu doar bucata ei)*.
	 */
	--inco-dash-ink: var(--darker-cyan, #0A435C);
	--inco-dash-muted: var(--inputs-palceholder, #53798A);
	--inco-dash-border: var(--light-gray, #C4D2D7);
	--inco-dash-bg: var(--white-bg, #FAFCFF);
	--inco-dash-white: var(--pure-white, #FFFFFF);
	--inco-dash-tint: var(--blue-card-fill-default, #E8F8FF);
	--inco-dash-primary: var(--green-fill-primary-default, #056E9B);
	--inco-dash-danger: var(--red, #D73B3B);

	/*
	 * Rândul activ e **verdele plin al site-ului**, nu gradientul de brand.
	 *
	 * 🔴 În Figma stilul se numește `gradient-fill-primary-default`, deci
	 * pusesem gradientul. Seba l-a văzut și l-a refuzat: „nu trebuie gradient
	 * pe cel activ, și acel verde integral". Numele unui stil din machetă spune
	 * de unde a fost luat, nu ce trebuie să vadă clientul.
	 *
	 * `#0B8669` e singurul verde al proiectului — același din plăcile promo,
	 * din butoanele cardului și din hover-ul lui „Vezi tot". E scris direct,
	 * nu prin `var()`: numele din Figma NU sunt declarate nicăieri în CSS-ul
	 * site-ului, deci un `var(--green, …)` ar fi doar rezerva, cu aparența unui
	 * token. Restul proiectului îl scrie tot direct.
	 */
	--inco-dash-activ-fundal: #0B8669;

	--inco-dash-r: 8px;
	--inco-dash-r-lg: 16px;

	--inco-dash-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Lățimile din machetă: 324 + 16 + 1004 = 1344. */
	--inco-dash-aside: 324px;
	--inco-dash-gap: 16px;

	box-sizing: border-box;
	max-width: 1344px;
	margin-inline: auto;
	padding-inline: 0;
	font-family: var(--inco-dash-font);
	color: var(--inco-dash-ink);
}

.inco-dash *,
.inco-dash *::before,
.inco-dash *::after {
	box-sizing: border-box;
}

/* ═════════════════════════════════ Containerul paginii ═══════════════════
   🔴 Tema plafonează conținutul la 1140px, iar macheta cere 1344.

   Hello Elementor scrie în `assets/css/theme.css`:
     body:not([class*=elementor-page-]) .site-main { max-width:1140px; padding-inline:10px }
   iar kitul Elementor dă containerelor `--container-max-width: 1344px`. Fără
   eliberare, panoul ar fi ieșit cu 112px mai îngust de fiecare parte decât
   headerul de deasupra lui.

   Specificitatea regulii temei e (0,2,1). `body.inco-dash-page main.site-main`
   ajunge la (0,2,2) și câștigă fără `!important`.

   Clasa `inco-dash-page` se pune din PHP doar când pagina conține chiar
   shortcode-ul nostru — vezi `Assets::body_class()`.
   ═════════════════════════════════════════════════════════════════════════ */

body.inco-dash-page main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

@media (max-width: 1024px) {
	.inco-dash {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	.inco-dash {
		padding-inline: 16px;
	}
}

/* ═══════════════════════════════════════════════════════════ Grila ═══════ */

/*
 * `[woocommerce_my_account]` scoate `<div class="woocommerce">` cu meniul și
 * conținutul ca frați direcți. Grila se aplică pe el; un wrapper propriu ar fi
 * cerut suprascrierea template-ului `myaccount/my-account.php`.
 */
/*
 * ⚠️ Plasare EXPLICITĂ prin `grid-template-areas`, nu auto-placement.
 *
 * Prima versiune se baza pe ordinea din DOM: meniul e primul copil, deci ar fi
 * căzut în coloana 1. În practică ieșea invers — meniul lat în dreapta, panoul
 * îngust în stânga și mai jos. Cu zone numite, poziția nu mai depinde nici de
 * ordinea din markup, nici de vreo regulă străină care ar plasa un element
 * într-o coloană anume: fiecare element își cere zona pe nume.
 *
 * Clasele dublate pe cei doi copii: WooCommerce le flotează la 30% / 68% cu
 * `.woocommerce-account .woocommerce-MyAccount-navigation`, adică (0,2,0) —
 * exact cât o regulă a mea cu două clase. La egalitate decide ordinea foilor,
 * iar aia e o dependență pe care nu vreau să o am. Dublate, ajung la (0,3,0) și
 * câștigă indiferent de ordine.
 */
.inco-dash .woocommerce {
	display: grid;
	grid-template-columns: var(--inco-dash-aside) minmax(0, 1fr);
	grid-template-areas: "inco-nav inco-panel";
	gap: var(--inco-dash-gap);
	align-items: start;
	max-width: none;
}

.inco-dash .woocommerce-MyAccount-navigation.woocommerce-MyAccount-navigation {
	grid-area: inco-nav;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

.inco-dash .woocommerce-MyAccount-content.woocommerce-MyAccount-content {
	grid-area: inco-panel;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	min-width: 0;
}

/* Notificările WooCommerce, când apar direct în container, trec peste tot. */
.inco-dash > .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.inco-dash .woocommerce-notices-wrapper:empty {
	display: none;
}

@media (max-width: 1024px) {
	.inco-dash .woocommerce {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"inco-nav"
			"inco-panel";
	}
}

/* ═══════════════════════════════════ Pagina de cont, pentru musafiri ════

   🔴 Aici formularul ieșea strivit pe 324px.

   Pentru cine nu e autentificat, WooCommerce randează doar formularul de
   autentificare — fără meniu lateral, fără `.woocommerce-MyAccount-content`.
   Grila avea atunci un singur copil, care se așeza în coloana rezervată
   meniului. Cu `inco-dash--guest` containerul devine o singură coloană îngustă
   și centrată, iar formularul primește forma de card din sistemul de design.

   ⚠️ Ecranul acesta NU e în Figma. Regulile de mai jos există ca fallback-ul să
   nu arate rupt: popupul din header e calea normală de autentificare, iar aici
   ajunge doar cine are JavaScriptul blocat sau intră direct pe adresă.
   ═════════════════════════════════════════════════════════════════════════ */

.inco-dash--guest .woocommerce {
	display: block;
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
}

.inco-dash--guest .woocommerce h2 {
	margin: 0 0 16px;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.1;
	color: var(--inco-dash-ink);
	text-align: center;
}

/*
 * Formularul, ca card.
 *
 * `#customer_login` e wrapperul WooCommerce când înregistrarea e activată; când
 * nu e, rămâne doar `form.woocommerce-form-login`. Vizate amândouă, ca aspectul
 * să nu depindă de o setare din WooCommerce → Cont și confidențialitate.
 */
.inco-dash--guest form.woocommerce-form-login,
.inco-dash--guest form.woocommerce-form-register,
.inco-dash--guest form.woocommerce-ResetPassword {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 24px;
	border: 1px solid var(--inco-dash-border);
	border-radius: var(--inco-dash-r-lg);
	background: var(--inco-dash-white);
}

.inco-dash--guest .u-columns {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.inco-dash--guest .u-column1,
.inco-dash--guest .u-column2 {
	float: none;
	width: auto;
}

.inco-dash--guest .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--inco-dash-muted);
}

.inco-dash--guest .woocommerce-LostPassword {
	margin: 0;
	text-align: center;
}

.inco-dash--guest .woocommerce-form-row,
.inco-dash--guest p.form-row {
	margin: 0;
	padding: 0;
}

.inco-dash--guest label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--inco-dash-muted);
}

/*
 * Câmpurile. Lanț lung intenționat: tema pune
 * `input[type=text],input[type=password],… { border:1px solid #666;
 * border-radius:3px; padding:.5rem 1rem }` la (0,1,1) și se încarcă după noi.
 * `.inco-dash--guest .woocommerce input[type=...]` ajunge la (0,3,1).
 */
.inco-dash--guest .woocommerce input[type="text"],
.inco-dash--guest .woocommerce input[type="email"],
.inco-dash--guest .woocommerce input[type="password"] {
	width: 100%;
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid var(--inco-dash-muted);
	border-radius: var(--inco-dash-r);
	background: var(--inco-dash-bg);
	box-shadow: none;
	font-family: var(--inco-dash-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: var(--inco-dash-ink);
}

.inco-dash--guest .woocommerce input:focus {
	outline: none;
	border-color: var(--inco-dash-primary);
	box-shadow: 0 0 0 3px rgba(5, 110, 155, .15);
}

/*
 * Butonul de trimitere.
 *
 * `button.button.button` — clasa dublată pe markupul WooCommerce, ca la restul
 * ecranelor: `[type=submit]:hover` din tema Hello cântărește (0,2,0).
 */
.inco-dash--guest button.button.button,
.inco-dash--guest input.button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--inco-dash-r);
	background: var(--inco-dash-primary);
	color: var(--inco-dash-bg);
	font-family: var(--inco-dash-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

.inco-dash--guest button.button.button:hover,
.inco-dash--guest button.button.button:focus,
.inco-dash--guest input.button.button:hover {
	background: var(--green, #239278);
	color: var(--inco-dash-bg);
}

/* ═══════════════════════════════════════════════ Meniul lateral ═════════ */

.inco-dash .woocommerce-MyAccount-navigation {
	padding: 16px;
	border: 1px solid var(--inco-dash-border);
	border-radius: var(--inco-dash-r-lg);
	background: var(--inco-dash-white);
	float: none; /* WooCommerce îl flotează la 30% — în grid produce coloane fantomă */
	width: auto;
}

.inco-dash .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inco-dash .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/*
 * Elementul de meniu.
 *
 * Prefixat cu `.inco-dash`: `.page-content a { text-decoration: underline }` din
 * tema Hello cântărește (0,1,1) și ar fi subliniat toate elementele.
 * Vezi „Blindaj" la finalul fișierului.
 */
.inco-dash .woocommerce-MyAccount-navigation li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--inco-dash-r);
	background: transparent;
	color: var(--inco-dash-muted);
	font-family: var(--inco-dash-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

/*
 * Iconița, ca mască.
 *
 * `mask-image` + `background-color: currentColor` face glifa să moștenească
 * culoarea textului, deci starea activă (alb pe verde) nu are nevoie de un al
 * doilea desen. Data-URI-urile vin din PHP, în `style` pe container, ca să nu
 * existe două copii ale aceluiași SVG.
 */
.inco-dash .woocommerce-MyAccount-navigation li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	/*
	 * Desenul implicit, pentru orice tab adăugat de alt plugin.
	 *
	 * 🔴 AICI a fost bug-ul „toate iconițele la fel", din 10 august.
	 *
	 * Scrisesem în comentariu că pericolul e un fallback pus DUPĂ cazurile
	 * particulare — și am tras concluzia greșită, că dacă îl scriu ÎNAINTE sunt
	 * în siguranță. Nu: **specificitatea bate ordinea**, ordinea decide doar la
	 * egalitate. Regula asta are (0,2,3) — două clase și trei tipuri, fiindcă
	 * `::before` numără ca element — iar suprascrierile de dedesubt aveau
	 * (0,2,2). Deci baza câștiga oriunde aș fi pus-o, și toate cele șapte
	 * rânduri primeau desenul de la „Panou control".
	 *
	 * Suprascrierile de mai jos sunt acum prefixate cu `li.…` pe container,
	 * deci (0,3,3): câștigă pe merit, nu pe poziție.
	 */
	-webkit-mask-image: var(--inco-dash-i-dashboard);
	mask-image: var(--inco-dash-i-dashboard);
}

.inco-dash .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard > a::before {
	-webkit-mask-image: var(--inco-dash-i-dashboard);
	mask-image: var(--inco-dash-i-dashboard);
}

.inco-dash .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders > a::before {
	-webkit-mask-image: var(--inco-dash-i-orders);
	mask-image: var(--inco-dash-i-orders);
}

.inco-dash .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-address > a::before {
	-webkit-mask-image: var(--inco-dash-i-address);
	mask-image: var(--inco-dash-i-address);
}

.inco-dash .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods > a::before {
	-webkit-mask-image: var(--inco-dash-i-payment);
	mask-image: var(--inco-dash-i-payment);
}

.inco-dash .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--inco-favorite > a::before {
	-webkit-mask-image: var(--inco-dash-i-favorite);
	mask-image: var(--inco-dash-i-favorite);
}

.inco-dash .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account > a::before {
	-webkit-mask-image: var(--inco-dash-i-account);
	mask-image: var(--inco-dash-i-account);
}

.inco-dash .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a::before {
	-webkit-mask-image: var(--inco-dash-i-logout);
	mask-image: var(--inco-dash-i-logout);
}

.inco-dash .woocommerce-MyAccount-navigation li > a:hover,
.inco-dash .woocommerce-MyAccount-navigation li > a:focus-visible {
	background: var(--inco-dash-tint);
	color: var(--inco-dash-primary);
	text-decoration: none;
}

.inco-dash .woocommerce-MyAccount-navigation li > a:focus-visible {
	outline: 2px solid var(--inco-dash-primary);
	outline-offset: -2px;
}

/* Starea activă: verde plin, text Semi Bold — exact ca în machetă. */
.inco-dash .woocommerce-MyAccount-navigation li.is-active > a,
.inco-dash .woocommerce-MyAccount-navigation li.is-active > a:hover,
.inco-dash .woocommerce-MyAccount-navigation li.is-active > a:focus-visible {
	background: var(--inco-dash-activ-fundal);
	border-radius: 8px;
	color: var(--inco-dash-bg);
	font-weight: 600;
}

/* Dezautentificarea: roșu doar la hover, ca acțiune distructivă. */
.inco-dash .woocommerce-MyAccount-navigation-link--customer-logout > a:hover {
	background: rgba(215, 59, 59, .08);
	color: var(--inco-dash-danger);
}

/* ═══════════════════════════════════════════════ Panoul din dreapta ═════ */

.inco-dash .woocommerce-MyAccount-content {
	display: flex;
	flex-direction: column;
	gap: var(--inco-dash-gap);
	padding: 24px;
	border: 1px solid var(--inco-dash-border);
	border-radius: var(--inco-dash-r-lg);
	background: var(--inco-dash-white);
	float: none; /* WooCommerce îl flotează la 68% */
	width: auto;
	min-width: 0;
}

.inco-dash__paneltitle {
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: var(--inco-dash-ink);
}

/*
 * Paragrafele native de bun venit („Salut X…", „Din panoul contului poți…").
 *
 * Nu sunt în machetă și nu sunt acțiuni, deci nu se pot scoate cu
 * `remove_action`. Ascunse doar pe panoul de control (`inco-dash-home`), ca să
 * nu prindem paragrafele reale din celelalte ecrane — pe „Adrese", de pildă,
 * textul explicativ e util.
 */
body.inco-dash-home .inco-dash .woocommerce-MyAccount-content > p {
	display: none;
}

/* ═══════════════════════════════════════════════════════ Cardurile ══════ */

.inco-dash__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/*
 * 454px, cât în machetă.
 *
 * `flex: 0 1 454px` — bază 454, se poate strânge, dar NU crește. În panoul de
 * 1004px intră două pe rând (454+16+454 = 924 din 956 disponibili), cu 32px
 * liberi la dreapta, exact cum arată macheta. Cu `flex-grow: 1` s-ar fi întins
 * la 470 fiecare și cardurile n-ar mai fi avut lățimea din design.
 */
/*
 * 🔴 Clasa dublată — `text-decoration` era vizibil greșit.
 *
 * `theme.css` din Hello are `.comments-area a, .page-content a
 * { text-decoration: underline }`, adică (0,1,1). Cardul e un `<a>` din
 * `div.page-content`, iar `.inco-dash__card` cu o singură clasă (0,1,0) pierdea:
 * titlul cardului și rândul „Vezi toate comenzile" apăreau subliniate. Am
 * documentat capcana în „Blindaj" de la finalul fișierului și tot am uitat să o
 * aplic aici — de aceea regula e acum dublată, ca butoanele.
 *
 * Elementele din interior (`__cardlabel`, `__cardcta`) sunt `span`-uri, deci
 * moștenesc de la `<a>`: reparat aici, e reparat și acolo.
 */
.inco-dash__card.inco-dash__card {
	display: grid;
	grid-template-rows: 1fr auto;
	justify-items: center;
	align-items: center;
	gap: 8px;
	flex: 0 1 454px;
	min-width: 0;
	height: 180px;
	padding: 14px 16px 10px;
	border: 1px solid var(--inco-dash-border);
	border-radius: var(--inco-dash-r);
	background: var(--inco-dash-bg);
	color: var(--inco-dash-ink);
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease;
}

.inco-dash__card.inco-dash__card:hover,
.inco-dash__card.inco-dash__card:focus-visible {
	border-color: var(--inco-dash-primary);
	background: var(--inco-dash-white);
	color: var(--inco-dash-ink);
	text-decoration: none;
}

.inco-dash__card.inco-dash__card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(5, 110, 155, .15);
}

.inco-dash__cardtop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* Pastila glifei: 64×64, fundal #E8F8FF, bordură, rază 8. */
.inco-dash__cardicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--inco-dash-border);
	border-radius: var(--inco-dash-r);
	background: var(--inco-dash-tint);
	color: var(--inco-dash-primary);
}

.inco-dash__cardicon svg {
	width: 48px;
	height: 48px;
}

.inco-dash__cardlabel {
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	color: var(--inco-dash-ink);
	text-align: center;
}

/*
 * Rândul „Vezi …".
 *
 * În Figma e poziționat absolut, jos, aproximativ centrat. Aici e pur și simplu
 * al doilea rând al grilei (`1fr auto`), deci ajunge jos singur, centrat exact —
 * și rămâne acolo dacă titlul se rupe pe două rânduri, ceea ce o poziționare
 * absolută nu ar fi rezolvat.
 */
.inco-dash__cardcta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--inco-dash-muted);
}

.inco-dash__cardarrow {
	display: inline-flex;
	transition: transform .18s ease;
}

.inco-dash__card:hover .inco-dash__cardarrow {
	transform: translateX(3px);
}

@media (max-width: 560px) {
	/* Dublată și aici: regula de bază e acum (0,2,0), iar media query-ul nu
	   adaugă specificitate. */
	.inco-dash__card.inco-dash__card {
		flex: 1 1 100%;
		height: auto;
		min-height: 160px;
	}
}

/* ═══════════════════════════════ Ecranele native, în panou ══════════════ */

/*
 * Comenzi, Adrese, Detalii cont și Metode de plată rămân ale WooCommerce.
 * ⚠️ Macheta NU conține aceste ecrane — există doar panoul de control. Regulile
 * de mai jos nu sunt „design", ci strictul necesar ca ecranele native să nu
 * arate rupte în interiorul cardului alb: tipografia noastră, tabelul fără
 * chenarele grele ale temei, butoanele în paleta noastră.
 */

.inco-dash .woocommerce-MyAccount-content h2,
.inco-dash .woocommerce-MyAccount-content h3 {
	margin: 0;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	color: var(--inco-dash-ink);
}

.inco-dash .woocommerce-MyAccount-content p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--inco-dash-muted);
}

.inco-dash .woocommerce-MyAccount-content a:not(.inco-dash__card):not(.inco-dash-btn) {
	color: var(--inco-dash-primary);
	text-decoration: none;
}

.inco-dash .woocommerce-MyAccount-content a:not(.inco-dash__card):not(.inco-dash-btn):hover {
	text-decoration: underline;
}

/* Tabelul de comenzi. */
.inco-dash .woocommerce-MyAccount-content table.woocommerce-orders-table,
.inco-dash .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--inco-dash-border);
	border-radius: var(--inco-dash-r);
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	overflow: hidden;
}

.inco-dash .woocommerce-MyAccount-content table.shop_table th,
.inco-dash .woocommerce-MyAccount-content table.shop_table td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--inco-dash-border);
	background: none;
	text-align: start;
	vertical-align: middle;
	line-height: 1.4;
}

.inco-dash .woocommerce-MyAccount-content table.shop_table thead th {
	background: var(--inco-dash-bg);
	font-weight: 600;
	color: var(--inco-dash-ink);
}

.inco-dash .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
	border-bottom: 0;
}

.inco-dash .woocommerce-MyAccount-content table.shop_table tbody tr:hover > td {
	background: var(--inco-dash-bg);
}

/* Formularele native (adrese, detalii cont). */
.inco-dash .woocommerce-MyAccount-content form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.inco-dash .woocommerce-MyAccount-content label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--inco-dash-muted);
}

/*
 * Câmpurile.
 *
 * Selectorul are (0,2,2): tema pune `input[type=text],select,textarea
 * { border:1px solid #666; border-radius:3px; padding:.5rem 1rem }` la (0,1,1)
 * și se încarcă după noi. Vezi „Blindaj".
 */
.inco-dash .woocommerce-MyAccount-content input[type="text"],
.inco-dash .woocommerce-MyAccount-content input[type="email"],
.inco-dash .woocommerce-MyAccount-content input[type="tel"],
.inco-dash .woocommerce-MyAccount-content input[type="password"],
.inco-dash .woocommerce-MyAccount-content select,
.inco-dash .woocommerce-MyAccount-content textarea {
	width: 100%;
	min-height: 44px;
	padding: 12px 16px;
	border: 1px solid var(--inco-dash-muted);
	border-radius: var(--inco-dash-r);
	background: var(--inco-dash-bg);
	box-shadow: none;
	font-family: var(--inco-dash-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: var(--inco-dash-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.inco-dash .woocommerce-MyAccount-content input:focus,
.inco-dash .woocommerce-MyAccount-content select:focus,
.inco-dash .woocommerce-MyAccount-content textarea:focus {
	outline: none;
	border-color: var(--inco-dash-primary);
	box-shadow: 0 0 0 3px rgba(5, 110, 155, .15);
}

/* ═══════════════════════════════════════════════════════ Butoane ════════
   ⚠️ `.inco-dash-btn` NU se definește aici, ci în `account-button.css`.

   Popupul de autentificare folosește aceeași clasă, dar apare pe ORICE pagină,
   iar foaia asta se încarcă doar pe „Contul meu". Definiția stă în foaia globală;
   aici doar o refolosim pentru butoanele native ale WooCommerce.

   `dashboard.css` declară dependența de foaia globală prin `$deps` la
   `wp_enqueue_style`, deci ordinea e garantată.
   ═════════════════════════════════════════════════════════════════════════ */

.inco-dash .woocommerce-MyAccount-content button.button.button,
.inco-dash .woocommerce-MyAccount-content a.button.button,
.inco-dash .woocommerce-MyAccount-content input.button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: var(--inco-dash-r);
	background: var(--inco-dash-primary);
	color: var(--inco-dash-bg);
	font-family: var(--inco-dash-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.inco-dash .woocommerce-MyAccount-content button.button.button:hover,
.inco-dash .woocommerce-MyAccount-content button.button.button:focus,
.inco-dash .woocommerce-MyAccount-content a.button.button:hover,
.inco-dash .woocommerce-MyAccount-content input.button.button:hover {
	background: var(--green, #239278);
	color: var(--inco-dash-bg);
	text-decoration: none;
}

/* ═══════════════════════════════════ Dialogul de dezautentificare ══════
   `html.inco-dash-locked` e definit în `account-button.css` — blocarea
   scrollului e comună cu popupul de autentificare.
   ═════════════════════════════════════════════════════════════════════════ */

.inco-dash-logout {
	position: fixed;
	inset: 0;
	z-index: 9995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	pointer-events: none;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.inco-dash-logout.is-open {
	visibility: visible;
	pointer-events: auto;
}

.inco-dash-logout__overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 67, 92, .45);
	opacity: 0;
	transition: opacity .22s ease;
	cursor: pointer;
}

.inco-dash-logout.is-open .inco-dash-logout__overlay {
	opacity: 1;
}

.inco-dash-logout__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: min(400px, 100%);
	padding: 24px;
	border: 1px solid #C4D2D7;
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 18px 50px rgba(10, 67, 92, .18);
	text-align: center;
	transform: translateY(8px) scale(.98);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}

.inco-dash-logout.is-open .inco-dash-logout__panel {
	transform: none;
	opacity: 1;
}

.inco-dash-logout__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #E8F8FF;
	color: #056E9B;
}

.inco-dash-logout__text {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: #0A435C;
}

.inco-dash-logout__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100%;
}

@media (max-width: 400px) {
	.inco-dash-logout__actions {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inco-dash-logout__overlay,
	.inco-dash-logout__panel,
	.inco-dash__card,
	.inco-dash__cardarrow,
	.inco-dash .woocommerce-MyAccount-navigation li > a {
		transition: none;
	}
}

/* ═══════════════════════════════════ BLINDAJ împotriva temei ════════════

   NU simplifica selectorii cu clasa dublată (`.inco-dash-btn.inco-dash-btn`,
   `button.button.button`) și nu scurta lanțurile lungi de pe câmpuri. Sunt așa
   dintr-un motiv măsurat, nu din neglijență.

   Tema Hello Elementor livrează în `assets/css/reset.css`:

     [type=button], [type=submit], button {
         border:1px solid #c36; border-radius:3px; color:#c36;
         padding:.5rem 1rem; font-size:1rem; display:inline-block;
     }
     [type=button]:hover, [type=button]:focus,
     [type=submit]:hover, [type=submit]:focus { background-color:#c36; color:#fff }
     input[type=text], select, textarea { border:1px solid #666; border-radius:3px;
         padding:.5rem 1rem; width:100% }

   iar în `assets/css/theme.css`:

     .comments-area a, .page-content a { text-decoration: underline }

   Trei capcane, toate întâlnite deja pe acest site:

   1. `[type=button]` e selector de ATRIBUT, deci cântărește (0,1,0) — exact cât
      o clasă. Nu îl bate o clasă simplă, îl EGALEAZĂ, iar tema se încarcă după
      noi, deci câștigă ea.
   2. `[type=button]:hover` cântărește (0,2,0) și bate orice `:hover` scris cu o
      singură clasă (0,1,1), indiferent de ordinea foilor.
   3. `.page-content a` cântărește (0,1,1). Paginile stau în `div.page-content`,
      deci regula prinde toate linkurile noastre — inclusiv elementele de meniu
      și cardurile, care ar fi apărut subliniate.

   De aceea:
   - butoanele proprii au clasa dublată → (0,2,0) implicit, (0,2,1) pe stare;
   - butoanele WooCommerce sunt vizate cu `.button.button` → același efect pe un
     markup care nu e al nostru și pe care nu-l putem modifica;
   - câmpurile și linkurile sunt prefixate cu `.inco-dash` plus clasa lor, deci
     trec de (0,1,1) al temei.

   Simptomele, dacă cineva scurtează selectorii: borduri zmeurii pe butoane,
   colțuri de 3px, padding străin, fundal roz care rămâne după click (fiindcă
   `:focus` persistă), și meniu lateral cu toate elementele subliniate.

   Pluginul Inco Plus a lovit exact același perete și a documentat-o în
   `modules/ProductCard/assets/css/product-card.css`. Nu modificăm tema și nu
   modificăm Inco Plus — ne blindăm.
   ═════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════ CORECTURI, 10 august 2026 ══════════════
 *
 * Cerute de Seba, după ce am comparat pagina cu macheta.
 */

/*
 * 🔴 Aerul de sus — pagina începea lipită de antet.
 *
 * `.inco-dash` n-avea niciun spațiu deasupra, iar antetul e `sticky`: cardul
 * din stânga atingea bara albastră. În machetă e aer între ele.
 *
 * 40px, cât are subsolul deasupra lui *(`margin-block-start: 40px`)* — aceeași
 * respirație la capătul celălalt al paginii.
 */
.inco-dash {
	margin-block-start: 40px;
	margin-block-end: 40px;
}

/*
 * 🔴 Iconița rândului activ, cu 1px mai groasă.
 *
 * Pe fundal închis, un contur de 1,5px se subțiază optic. Cerut de Seba.
 *
 * ⚠️ Nu se poate schimba `stroke-width` dintr-o mască — desenul e o siluetă,
 * nu un SVG inline. Îngroșarea se face din `drop-shadow` fără decalaj: un
 * contur de 0,5px în jurul formei, care la 18px arată exact ca un stroke de 2.
 */
.inco-dash .woocommerce-MyAccount-navigation li.is-active > a::before,
.inco-dash .woocommerce-MyAccount-navigation li.is-active > a::before {
	filter: drop-shadow(0 0 .5px currentColor) drop-shadow(0 0 .5px currentColor);
}

/* ─────────────────────────────────────────────────── butoanele, ale noastre */

/*
 * 🔴 Un singur sistem de butoane pe site — al nostru.
 *
 * Modulul stiliza direct `button.button` de la WooCommerce, cu valorile lui.
 * Pachetul de checkout are `.inco-btn`, tot al lui Manu. Două sisteme pe
 * același site se depărtează la prima corectură.
 *
 * Valorile de aici sunt cele din `02-design-system.md`, `secondary-button`:
 * **rază 8 · fundal `cyan` · hover `green`** — plus tipografia din machetă,
 * Inter 500 16, și înălțimea de 44 a butonului „Adaugă în coș".
 *
 * ⚠️ Selectoarele repetă clasa *(`.button.button`)* fiindcă `reset.css`-ul
 * temei prinde `[type="submit"]` la (0,1,1). → §4g
 */
.inco-dash .button.button,
.inco-dash button.button.button,
.inco-dash input[type="submit"].button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 44px;
	padding-inline: 18px;
	border: 0;
	border-radius: 8px;
	background: var(--inco-dash-primary);
	color: var(--inco-dash-bg);
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}

/* `color` se declară și pe stări — altfel o ia tema. → §4n */
.inco-dash .button.button:hover,
.inco-dash button.button.button:hover,
.inco-dash input[type="submit"].button:hover,
.inco-dash .button.button:focus-visible,
.inco-dash button.button.button:focus-visible {
	background: var(--green, #239278);
	color: var(--inco-dash-bg);
}