/* ============================================================
 * VIVA-COM — Authentification / Inscription (Pro-Design + Animationen)
 * ============================================================ */

/* Tokens locaux (au cas où le thème ne soit pas chargé) */
:where(.viva-auth-card) {
	--va-primary:       #1F6F3D;
	--va-primary-dark:  #166134;
	--va-primary-light: #34A85C;
	--va-slate-950:     #020617;
	--va-slate-900:     #0F172A;
	--va-slate-700:     #334155;
	--va-slate-500:     #64748B;
	--va-slate-300:     #CBD5E1;
	--va-slate-100:     #F1F5F9;
	--va-slate-50:      #F8FAFC;
	--va-border:        #E2E8F0;
	--va-border-strong: #CBD5E1;
	--va-danger:        #DC2626;
	--va-white:         #FFFFFF;
}

/* Conteneur principal */
.viva-auth-card {
	max-width: 540px;
	width: calc(100% - 32px);
	margin: 64px auto;
	background: var(--va-white);
	border: 1px solid var(--va-border);
	border-radius: 20px;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 12px 40px rgba(15, 23, 42, 0.08);
	padding: 44px 40px 36px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	animation: vivaCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vivaCardIn {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

/* Barre lumineuse animée en haut */
.viva-auth-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		transparent 0%,
		var(--va-primary) 30%,
		var(--va-primary-light) 50%,
		var(--va-primary) 70%,
		transparent 100%);
	background-size: 200% 100%;
	animation: vivaShimmer 4s linear infinite;
}

@keyframes vivaShimmer {
	0%   { background-position: 0% 0%; }
	100% { background-position: 200% 0%; }
}

.viva-partner-card { max-width: 760px; }

.viva-auth-header {
	text-align: center;
	margin-bottom: 32px;
}

.viva-auth-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--va-primary);
	margin-bottom: 18px;
	padding: 7px 16px;
	background: rgba(31, 111, 61, 0.08);
	border: 1px solid rgba(31, 111, 61, 0.18);
	border-radius: 999px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.viva-auth-header h1 {
	font-size: 1.85rem;
	font-weight: 800;
	color: var(--va-slate-950);
	margin: 0 0 10px;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.viva-auth-sub {
	color: var(--va-slate-500);
	font-size: 0.98rem;
	margin: 0;
	line-height: 1.55;
}

/* Notification banner */
.viva-auth-notice {
	margin-bottom: 22px;
	padding: 14px 18px;
	border-radius: 12px;
	font-size: 0.9rem;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	animation: vivaNoticeIn 0.35s ease-out both;
}

@keyframes vivaNoticeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.viva-auth-notice.success {
	background: linear-gradient(135deg, rgba(31, 111, 61, 0.06), rgba(31, 111, 61, 0.12));
	border: 1px solid rgba(31, 111, 61, 0.25);
	color: #143D24;
}
.viva-auth-notice.success strong { color: var(--va-primary); }

.viva-auth-notice.error {
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.1));
	border: 1px solid rgba(220, 38, 38, 0.25);
	color: #7F1D1D;
}
.viva-auth-notice.error strong { color: var(--va-danger); }

/* Formulaire */
.viva-auth-form { display: flex; flex-direction: column; gap: 18px; }

.viva-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 540px) {
	.viva-row { grid-template-columns: 1fr; }
	.viva-auth-card { padding: 32px 22px 28px; border-radius: 16px; margin: 24px auto; }
	.viva-auth-header h1 { font-size: 1.55rem; }
}

.viva-field { display: flex; flex-direction: column; gap: 7px; position: relative; }

.viva-field label {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--va-slate-700);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.viva-field input {
	padding: 13px 16px;
	border: 1.5px solid var(--va-border);
	border-radius: 12px;
	font-size: 0.98rem;
	background: var(--va-white);
	color: var(--va-slate-900);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.4;
}
.viva-field input:hover { border-color: var(--va-border-strong); }
.viva-field input:focus {
	outline: none;
	border-color: var(--va-primary);
	box-shadow: 0 0 0 4px rgba(31, 111, 61, 0.12);
	background: var(--va-white);
}
.viva-field input::placeholder { color: var(--va-slate-300); }
.viva-field input:disabled {
	background: var(--va-slate-50);
	color: var(--va-slate-500);
	cursor: not-allowed;
}

/* Checkbox AGB / Remember me */
.viva-checkbox-inline {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 0.88rem;
	color: var(--va-slate-700);
	line-height: 1.55;
	cursor: pointer;
	user-select: none;
	padding: 4px 0;
}
.viva-checkbox-inline input[type=checkbox] {
	margin: 3px 0 0;
	width: 18px;
	height: 18px;
	accent-color: var(--va-primary);
	flex-shrink: 0;
	cursor: pointer;
}
.viva-checkbox-inline a {
	color: var(--va-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Boutons */
.viva-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 28px;
	border: none;
	border-radius: 14px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.18s ease;
	margin-top: 8px;
	position: relative;
	overflow: hidden;
	letter-spacing: 0.01em;
	width: 100%;
}
.viva-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: 100% 0;
	transition: background-position 0.6s ease;
	pointer-events: none;
}
.viva-btn:hover::after { background-position: -100% 0; }

.viva-btn-primary {
	background: linear-gradient(135deg, var(--va-primary) 0%, var(--va-primary-dark) 100%);
	color: var(--va-white);
	box-shadow: 0 4px 14px rgba(31, 111, 61, 0.22);
}
.viva-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(31, 111, 61, 0.32);
}
.viva-btn-primary:active { transform: translateY(0); }

/* Liens bas de page */
.viva-auth-switch {
	text-align: center;
	font-size: 0.9rem;
	color: var(--va-slate-500);
	margin: 18px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--va-border);
}
.viva-auth-switch + .viva-auth-switch {
	border-top: none;
	padding-top: 6px;
	margin-top: 0;
}
.viva-auth-switch a {
	color: var(--va-primary);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}
.viva-auth-switch a:hover {
	color: var(--va-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
 * Partner-Auswahl
 * ============================================================ */
.viva-partner-block {
	border: 2px solid var(--va-border);
	border-radius: 14px;
	padding: 18px 20px;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	background: var(--va-slate-50);
	animation: vivaCardIn 0.4s ease-out both;
	margin-bottom: 14px;
}
.viva-partner-block:nth-of-type(2) { animation-delay: 0.06s; }
.viva-partner-block:nth-of-type(3) { animation-delay: 0.12s; }

.viva-partner-block:has(.viva-partner-toggle input:checked) {
	border-color: var(--va-primary);
	background: linear-gradient(135deg, rgba(31, 111, 61, 0.04), rgba(31, 111, 61, 0.08));
	box-shadow: 0 4px 14px rgba(31, 111, 61, 0.1);
}

.viva-partner-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	user-select: none;
}

.viva-partner-toggle input[type=checkbox] {
	width: 22px;
	height: 22px;
	accent-color: var(--va-primary);
	flex-shrink: 0;
	cursor: pointer;
}

.viva-partner-name {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--va-slate-950);
	letter-spacing: -0.01em;
}

.viva-partner-hint {
	margin-left: auto;
	font-size: 0.82rem;
	color: var(--va-slate-500);
	font-weight: 500;
	background: var(--va-white);
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--va-border);
	white-space: nowrap;
}
.viva-partner-block:has(.viva-partner-toggle input:checked) .viva-partner-hint {
	color: var(--va-primary);
	border-color: rgba(31, 111, 61, 0.3);
}

.viva-partner-fields {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--va-border-strong);
	animation: vivaFieldsIn 0.3s ease-out both;
}
@keyframes vivaFieldsIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

.viva-partner-fields .viva-field label {
	color: var(--va-slate-500);
	font-size: 0.68rem;
}

.viva-partner-fields .viva-row {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
	.viva-partner-fields .viva-row { grid-template-columns: 1fr; }
}

/* === Service block enrichments (4 services) === */
.viva-service-block .viva-service-info {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
}
.viva-service-block .viva-service-icon {
	font-size: 1.6rem;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 12px;
	border: 1px solid var(--va-border);
	flex-shrink: 0;
}
.viva-service-block .viva-service-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.viva-service-block .viva-service-name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--va-slate-950);
}
.viva-service-block .viva-service-sub {
	font-size: 0.78rem;
	color: var(--va-slate-500);
}
.viva-service-block .viva-service-status {
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	flex-shrink: 0;
}
.viva-service-block .viva-service-status-on  { display: none; color: #15803d; }
.viva-service-block .viva-service-status-off { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; background: var(--va-slate-50); color: var(--va-slate-600); border: 1px solid var(--va-border); }
.viva-service-block.is-active .viva-service-status-on  { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 999px; background: rgba(22, 163, 74, 0.12); border: 1px solid rgba(22, 163, 74, 0.35); }
.viva-service-block.is-active .viva-service-status-off { display: none; }

/* Topbar CTA — bouton "Registrieren" plus accent */
.intranet-link-cta {
	background: var(--va-primary);
	color: var(--va-white) !important;
	border-radius: 999px;
	padding: 6px 14px !important;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	margin-left: 8px;
}
.intranet-link-cta:hover {
	background: var(--va-primary-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(31, 111, 61, 0.32);
}