/* ═══════════════════════════════════════════════════════════════
   ECLOGA ITALIA — AREA COLLABORATORI
   Pagina di accesso al gestionale Elatos per uso interno.
   Scoped sotto .ecloga-collab per evitare conflitti.
   ═══════════════════════════════════════════════════════════════ */

.ecloga-collab {
	--eh-blue: #1666C0;
	--eh-blue-dark: #124E94;
	--eh-blue-light: #d8e6f7;
	--eh-navy: #0B1A32;
	--eh-white: #FFFFFF;
	--eh-offwhite: #eef2ff;
	--eh-gray-100: #EEF1F5;
	--eh-gray-200: #DDE2EA;
	--eh-gray-300: #C5CCD8;
	--eh-gray-500: #6B7A90;
	--eh-gray-700: #3A4560;
	--eh-text: #1A1D26;

	font-family: 'Outfit', sans-serif;
	color: var(--eh-text);
	line-height: 1.6;
	background: var(--eh-white);
}

.ecloga-collab * { box-sizing: border-box; }

.ecloga-collab .ecloga-wrap {
	max-width: 1440px;
	margin: auto;
	padding: 0 2rem;
}

/* ═══════════════════════════════════════════
   PAGINA — layout centrato verticalmente
   ═══════════════════════════════════════════ */
.ecloga-collab .collab-page {
	min-height: calc(100vh - 80px); /* sottrae altezza header Divi fixed */
	display: flex;
	align-items: center;
	padding: 5rem 2rem;
	position: relative;
	overflow: hidden;
	background: url(https://www.eclogaitalia.it/wp-content/uploads/2014/11/area_c.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* Griglia decorativa di sfondo */
.ecloga-collab .collab-page::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0v60M0 30h60' stroke='%231666C0' stroke-width='.2' fill='none' opacity='.12'/%3E%3C/svg%3E");
	background-size: 60px 60px;
	pointer-events: none;
}


.ecloga-collab .collab-page .ecloga-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* ─── Colonna centrale ─── */
.ecloga-collab .collab-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	max-width: 480px;
	margin: 0 auto;
}

/* ═══════════════════════════════════════════
   EYEBROW "Solo uso interno"
   ═══════════════════════════════════════════ */
.ecloga-collab .collab-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	background: color-mix(in srgb, var(--eh-navy) 7%, white);
	color: var(--eh-gray-700);
	border: 1px solid var(--eh-gray-200);
	padding: .4rem .9rem;
	border-radius: 30px;
	font-size: .73rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ecloga-collab .collab-eyebrow svg {
	width: 12px;
	height: 12px;
	color: var(--eh-gray-500);
}

/* ═══════════════════════════════════════════
   CARD LOGIN
   ═══════════════════════════════════════════ */
.ecloga-collab .collab-card {
	width: 100%;
	background: var(--eh-white);
	border: 1px solid var(--eh-gray-200);
	border-radius: 20px;
	padding: 2.4rem 2.2rem 2rem;
	box-shadow:
		0 4px 8px rgba(11,26,50,.04),
		0 20px 48px -16px rgba(11,26,50,.16);
}

/* ─── Header card (logo + titolo) ─── */
.ecloga-collab .collab-card-header {
	text-align: center;
	margin-bottom: 2rem;
}

/* Monogramma "E" — segnaposto brand */
.ecloga-collab .collab-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--eh-blue) 0%, var(--eh-blue-dark) 100%);
	color: var(--eh-white);
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-bottom: 1.2rem;
	box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--eh-blue) 45%, transparent);
}

.ecloga-collab .collab-title {
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.2;
	color: var(--eh-navy);
	margin: 0 0 .55rem 0;
}

.ecloga-collab .collab-subtitle {
	font-size: .9rem;
	color: var(--eh-gray-500);
	line-height: 1.55;
	margin: 0;
}

/* ═══════════════════════════════════════════
   FORM
   ═══════════════════════════════════════════ */
.ecloga-collab .collab-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* ─── Campo (label + input wrapper) ─── */
.ecloga-collab .collab-field {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.ecloga-collab .collab-field label {
	font-size: .82rem;
	font-weight: 700;
	color: var(--eh-navy);
	letter-spacing: .01em;
}

/* Wrapper input con icona interna */
.ecloga-collab .collab-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.ecloga-collab .collab-input-icon {
	position: absolute;
	left: .9rem;
	width: 17px;
	height: 17px;
	color: var(--eh-gray-300);
	pointer-events: none;
	flex-shrink: 0;
	transition: color .2s;
}

.ecloga-collab .collab-input-wrap:focus-within .collab-input-icon {
	color: var(--eh-blue);
}

.ecloga-collab .collab-field input {
	width: 100%;
	padding: .8rem .9rem .8rem 2.65rem;
	border: 1.5px solid var(--eh-gray-200);
	border-radius: 10px;
	background: var(--eh-white);
	font-family: inherit;
	font-size: .97rem;
	font-weight: 400;
	color: var(--eh-text);
	transition: border-color .2s, box-shadow .2s;
	outline: none;
}

.ecloga-collab .collab-field input::placeholder {
	color: var(--eh-gray-300);
}

.ecloga-collab .collab-field input:focus {
	border-color: var(--eh-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--eh-blue) 14%, transparent);
}

/* ─── Bottone submit ─── */
.ecloga-collab .collab-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100%;
	margin-top: .4rem;
	padding: .95rem 1.6rem;
	background: linear-gradient(135deg, var(--eh-blue) 0%, var(--eh-blue-dark) 100%);
	color: var(--eh-white);
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s cubic-bezier(.16, 1, .3, 1);
	box-shadow: 0 4px 14px -3px color-mix(in srgb, var(--eh-blue) 45%, transparent);
}

.ecloga-collab .collab-submit svg {
	width: 16px;
	height: 16px;
	transition: transform .2s;
	flex-shrink: 0;
}

.ecloga-collab .collab-submit:hover {
	background: linear-gradient(135deg, var(--eh-blue-dark) 0%, #0A2E5C 100%);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -4px color-mix(in srgb, var(--eh-blue) 55%, transparent);
	gap: .75rem;
}

.ecloga-collab .collab-submit:hover svg {
	transform: translateX(2px);
}

.ecloga-collab .collab-submit:active {
	transform: translateY(0);
}

/* ─── Nota "si apre in nuova scheda" ─── */
.ecloga-collab .collab-new-tab-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 1rem 0 0 0;
	font-size: .78rem;
	color: var(--eh-gray-500);
}

.ecloga-collab .collab-new-tab-note svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   SUPPORTO IT
   ═══════════════════════════════════════════ */
.ecloga-collab .collab-support {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .83rem;
	color: var(--eh-gray-500);
	flex-wrap: wrap;
	justify-content: center;
}

.ecloga-collab .collab-support svg {
	width: 15px;
	height: 15px;
	color: var(--eh-gray-300);
	flex-shrink: 0;
}

.ecloga-collab .collab-support span {
	color: var(--eh-gray-500);
}

.ecloga-collab .collab-support a {
	color: var(--eh-blue);
	font-weight: 600;
	text-decoration: none;
	transition: color .2s;
}

.ecloga-collab .collab-support a:hover {
	color: var(--eh-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
	.ecloga-collab .collab-page {
		padding: 3.5rem 1rem;
		align-items: flex-start;
	}

	.ecloga-collab .collab-card {
		padding: 2rem 1.5rem 1.8rem;
		border-radius: 16px;
	}

	.ecloga-collab .collab-title {
		font-size: 1.35rem;
	}
}