/* =========================================================================
   Pastila de cont din header + popupul de autentificare.

   Foaie SEPARATĂ de dashboard.css, și încărcată global: butonul e în header, pe
   toate paginile, iar popupul trebuie să poată apărea de oriunde. `dashboard.css`
   rămâne limitat la „Contul meu", unde e nevoie de el.

   ⚠️ Blindajul de specificitate se aplică și aici. Vezi secțiunea de la finalul
   `dashboard.css`: `[type=button]:hover` din tema Hello cântărește (0,2,0) și
   `.page-content a` cântărește (0,1,1).
   ========================================================================= */

.inco-acc-btn-bar {
	display: flex;
	align-items: center;
}

/*
 * 44×44, cât pastila de favorite din Inco Plus, ca cele două să pară o pereche.
 * Macheta cere 42×42 pentru amândouă; alinierea la 42 ar fi cerut modificarea
 * pluginului Inco Plus.
 *
 * Clasa dublată: e un `<a>` din `div.page-content`, deci `.page-content a` al
 * temei (0,1,1) i-ar fi pus subliniere.
 */
.inco-acc-btn.inco-acc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #E8F8FF;
	color: #0A435C;
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.inco-acc-btn.inco-acc-btn:hover,
.inco-acc-btn.inco-acc-btn:focus-visible {
	background: #056E9B;
	color: #FFFFFF;
	text-decoration: none;
}

.inco-acc-btn.inco-acc-btn:focus-visible {
	outline: 2px solid #056E9B;
	outline-offset: 2px;
}

.inco-acc-btn__icon {
	display: inline-flex;
}

.inco-acc-btn__icon svg {
	width: 24px;
	height: 24px;
}

/* Ascuns vizual, citit de cititoarele de ecran. */
.inco-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ═════════════════════════════════════════════ Butonul comun al pluginului
   Definit AICI, nu în `dashboard.css`: popupul de autentificare îl folosește și
   apare pe orice pagină, iar `dashboard.css` se încarcă doar pe „Contul meu".
   `dashboard.css` declară dependența de foaia asta, deci ordinea e garantată.

   Clasa dublată: `[type=button]` din tema Hello cântărește (0,1,0) și
   `[type=button]:hover` cântărește (0,2,0).
   ═════════════════════════════════════════════════════════════════════════ */

.inco-dash-btn.inco-dash-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #056E9B;
	color: #FAFCFF;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	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-btn.inco-dash-btn:hover,
.inco-dash-btn.inco-dash-btn:focus {
	background: #045C82;
	color: #FAFCFF;
	text-decoration: none;
}

.inco-dash-btn--ghost.inco-dash-btn--ghost {
	background: transparent;
	border-color: #C4D2D7;
	color: #0A435C;
}

.inco-dash-btn--ghost.inco-dash-btn--ghost:hover,
.inco-dash-btn--ghost.inco-dash-btn--ghost:focus {
	background: #E8F8FF;
	border-color: #056E9B;
	color: #0A435C;
}

.inco-dash-btn--solid.inco-dash-btn--solid {
	background: #056E9B;
	color: #FAFCFF;
}

/* ═══════════════════════════════════════════════════════════ Popupul ════ */

html.inco-dash-locked,
html.inco-dash-locked body {
	overflow: hidden;
}

.inco-auth {
	position: fixed;
	inset: 0;
	z-index: 9996;
	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;
	color: #0A435C;
}

.inco-auth * {
	box-sizing: border-box;
}

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

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

.inco-auth.is-open .inco-auth__overlay {
	opacity: 1;
}

.inco-auth__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: min(420px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 24px;
	border: 1px solid #C4D2D7;
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 18px 50px rgba(10, 67, 92, .18);
	transform: translateY(8px) scale(.98);
	opacity: 0;
	transition: transform .22s ease, opacity .22s ease;
}

.inco-auth.is-open .inco-auth__panel {
	transform: none;
	opacity: 1;
}

.inco-auth__close.inco-auth__close {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: #53798A;
	cursor: pointer;
}

.inco-auth__close.inco-auth__close:hover,
.inco-auth__close.inco-auth__close:focus {
	background: #E8F8FF;
	color: #0A435C;
}

.inco-auth__title {
	margin: 0;
	padding-inline-end: 40px;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.1;
	color: #0A435C;
}

/* ------------------------------------------------------------- taburi */

.inco-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border-radius: 10px;
	background: #FAFCFF;
	border: 1px solid #C4D2D7;
}

.inco-auth__tab.inco-auth__tab {
	padding: 10px 12px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #53798A;
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.inco-auth__tab.inco-auth__tab:hover,
.inco-auth__tab.inco-auth__tab:focus {
	background: #E8F8FF;
	color: #056E9B;
}

.inco-auth__tab.inco-auth__tab.is-active {
	background: #056E9B;
	color: #FAFCFF;
	font-weight: 600;
}

/* ---------------------------------------------------------- formulare */

.inco-auth__form {
	display: none;
	flex-direction: column;
	gap: 14px;
}

.inco-auth__form.is-active {
	display: flex;
}

.inco-auth__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.inco-auth__field > span {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: .02em;
	line-height: 1;
	color: #53798A;
}

/*
 * Lanț lung intenționat: tema pune
 * `input[type=text],input[type=email],…,select,textarea { border:1px solid #666;
 * border-radius:3px; padding:.5rem 1rem }` la (0,1,1) și se încarcă după noi.
 * `.inco-auth .inco-auth__field input` ajunge la (0,2,1) și câștigă.
 */
.inco-auth .inco-auth__field input {
	width: 100%;
	min-height: 44px;
	padding: 12px 14px;
	border: 1px solid #53798A;
	border-radius: 8px;
	background: #FAFCFF;
	box-shadow: none;
	font-family: inherit;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: #0A435C;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.inco-auth .inco-auth__field input:focus {
	outline: none;
	border-color: #056E9B;
	box-shadow: 0 0 0 3px rgba(5, 110, 155, .15);
}

.inco-auth__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #53798A;
	cursor: pointer;
}

.inco-auth .inco-auth__check input[type="checkbox"] {
	appearance: none;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid #C4D2D7;
	border-radius: 4px;
	background: #FAFCFF;
	cursor: pointer;
}

.inco-auth .inco-auth__check input[type="checkbox"]:checked {
	border-color: #056E9B;
	background-color: #056E9B;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FAFCFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.inco-auth__submit.inco-auth__submit {
	width: 100%;
}

.inco-auth__submit.is-busy {
	opacity: .6;
	pointer-events: none;
}

/* Linkurile secundare sunt `<button>`, ca să nu ducă nicăieri fără JS. */
.inco-auth__link.inco-auth__link {
	align-self: center;
	padding: 4px;
	border: 0;
	background: none;
	color: #056E9B;
	font-family: inherit;
	font-size: 13px;
	line-height: 1;
	text-decoration: underline;
	cursor: pointer;
}

.inco-auth__link.inco-auth__link:hover,
.inco-auth__link.inco-auth__link:focus {
	background: none;
	color: #045C82;
}

/* --------------------------------------------------------- mesaje */

.inco-auth__msg {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: #53798A;
}

.inco-auth__msg:empty {
	display: none;
}

.inco-auth__msg.is-error {
	color: #D73B3B;
}

.inco-auth__msg.is-ok {
	color: #0B8669;
}

.inco-auth__foot {
	margin: 0;
	font-size: 12px;
	text-align: center;
	color: #53798A;
}

.inco-auth .inco-auth__foot a {
	color: #056E9B;
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.inco-auth__overlay,
	.inco-auth__panel,
	.inco-acc-btn,
	.inco-auth__tab {
		transition: none;
	}
}