/* =========================================================
   ARRISAL B2B — Modern "Apple style" login theme
   Sovrascrive gli stili legacy (Bootstrap / Metronic / uniform)
   senza toccare la struttura o il funzionamento dei form.
   ========================================================= */

:root {
	--graphite:        #1d1d1f;   /* nero/grafite Apple, coerente col logo */
	--graphite-hover:  #333336;
	--accent:          #0071e3;   /* blu Apple per focus e link */
	--accent-hover:    #0077ed;
	--field-bg:        #f5f5f7;   /* grigio chiaro Apple */
	--field-border:    #d2d2d7;
	--text-muted:      #6e6e73;
	--card-radius:     22px;
	--field-radius:    12px;
	--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
	             "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Reset dello sfondo legacy ---------- */
html, body {
	height: 100%;
}

body {
	/* Annulla il vecchio background fixed/z-index:-1 dell'inline style */
	position: static !important;
	z-index: auto !important;
	width: 100% !important;
	min-height: 100vh !important;
	margin: 0 !important;
	padding: 0 !important;

	font-family: var(--font-sans) !important;
	color: var(--graphite) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	display: flex !important;
	align-items: center;
	justify-content: center;

	/* Base chiara in stile Apple */
	background: #f5f5f7 !important;
}

/* Layer di sfondo dedicato: foto della sede Arrisal + velo chiaro.
   Separato dal body per non appesantire il rendering della card. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: url("background_sketch.jpg") no-repeat center center;
	background-size: cover;
	pointer-events: none;
	z-index: 0;
}

/* ---------- Contenitore ---------- */
.container {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	padding: 24px;
	position: relative;
	z-index: 1;
}

.login-form,
.forget-form {
	font-family: var(--font-sans) !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* ---------- La card (glassmorphism) ---------- */
form[role=login] {
	background: rgba(255, 255, 255, 0.72) !important;
	-webkit-backdrop-filter: saturate(180%) blur(30px);
	backdrop-filter: saturate(180%) blur(30px);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--card-radius);
	padding: 44px 40px 40px !important;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.16),
		0 2px 10px rgba(0, 0, 0, 0.06);
	color: var(--graphite) !important;
	text-align: center;
	animation: card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes card-in {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0)     scale(1); }
}

/* ---------- Logo ---------- */
form[role=login] img {
	display: block;
	margin: 0 auto 30px !important;
	max-width: 190px !important;
	width: 62%;
	height: auto;
}

/* ---------- Titolo / testo (forget) ---------- */
form[role=login] h3 {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--graphite);
}

form[role=login] p.request-password {
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-muted);
	margin: 0 0 22px;
}

/* ---------- Campi input ---------- */
form[role=login] input.form-control,
form[role=login] input[type="text"],
form[role=login] input[type="password"] {
	width: 100% !important;
	height: auto !important;
	font-size: 17px !important;
	font-family: var(--font-sans) !important;
	color: var(--graphite) !important;
	background: var(--field-bg) !important;
	border: 1px solid var(--field-border) !important;
	border-radius: var(--field-radius) !important;
	padding: 15px 16px !important;
	margin: 0 0 14px !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

form[role=login] input.form-control::placeholder { color: #86868b; }

form[role=login] input.form-control:focus {
	outline: none !important;
	background: #ffffff !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18) !important;
}

/* ---------- Bottone principale ---------- */
form[role=login] button.btn,
form[role=login] .btn-primary {
	width: 100% !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	font-family: var(--font-sans) !important;
	letter-spacing: 0.01em;
	color: #ffffff !important;
	background: var(--graphite) !important;   /* sovrascrive l'inline #555 */
	border: none !important;
	border-radius: var(--field-radius) !important;
	padding: 15px 18px !important;
	margin: 8px 0 4px !important;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.08s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 18px rgba(29, 29, 31, 0.22);
}

form[role=login] button.btn:hover,
form[role=login] .btn-primary:hover {
	background: var(--graphite-hover) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 22px rgba(29, 29, 31, 0.28);
}

form[role=login] button.btn:active,
form[role=login] .btn-primary:active {
	transform: scale(0.99);
	box-shadow: 0 4px 12px rgba(29, 29, 31, 0.22);
}

/* ---------- Riga inferiore (ricordami + link) ---------- */
form[role=login] > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	text-align: left !important;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

form[role=login] label.inline {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	font-size: 14px;
	color: var(--text-muted) !important;
	cursor: pointer;
}

form[role=login] label.inline span {
	color: var(--graphite) !important;
	font-weight: 500 !important;
}

/* Checkbox pulita (gestisce anche il wrapper "uniform") */
.checker,
.checker span {
	width: 20px !important;
	height: 20px !important;
	background: none !important;
	border: none !important;
}

.checker span {
	border-radius: 6px !important;
	border: 1.5px solid var(--field-border) !important;
	background: #ffffff !important;
	display: inline-block !important;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.checker span.checked {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
}

.checker span.checked::after {
	content: "";
	position: absolute;
	left: 6px; top: 2px;
	width: 5px; height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.checker input {
	width: 20px !important;
	height: 20px !important;
	opacity: 0;
	cursor: pointer;
}

/* ---------- Link "Password dimenticata" ---------- */
a.psw,
a.psw:hover,
a.login-link {
	all: unset;
	box-sizing: border-box;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--accent) !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

a.psw span,
a.psw span:after { all: unset; }

a.psw:hover,
a.login-link:hover { color: var(--accent-hover) !important; }

/* Link "indietro" nel form di recupero */
.button.back {
	all: unset;
	box-sizing: border-box;
	font-family: var(--font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--accent) !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s ease;
}

.button.back:hover { color: var(--accent-hover) !important; }
.button.back span:after,
.button.back span:before { content: none !important; }
.button.back::before { content: "\2039"; font-size: 17px; line-height: 1; }

/* Nel form "forget" la riga inferiore è centrata e senza bordo */
.forget-form form[role=login] > div {
	justify-content: center;
	border-top: none;
	padding-top: 8px;
	margin-top: 8px;
}

/* ---------- Micro banner CTA "Promozioni riservate" ---------- */
.promo-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	padding: 15px 18px;
	background: var(--accent);   /* blu accent Apple */
	border: none;
	border-radius: 16px !important;
	box-shadow: 0 10px 26px rgba(0, 113, 227, 0.32);
	text-decoration: none !important;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
	animation: card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.promo-banner:hover {
	transform: translateY(-2px);
	background: var(--accent-hover);
	box-shadow: 0 14px 34px rgba(0, 113, 227, 0.42);
}

.promo-banner:active { transform: translateY(0); }

.promo-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-align: left;
}

.promo-title {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: -0.01em;
}

.promo-sub {
	font-family: var(--font-sans);
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.82);
	margin-top: 3px;
}

.promo-arrow {
	flex: 0 0 auto;
	font-size: 30px;
	font-weight: 400;
	color: #ffffff;
	line-height: 1;
	transition: transform 0.2s ease;
}

.promo-banner:hover .promo-arrow { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	.container { padding: 16px; }
	form[role=login] { padding: 34px 24px 30px !important; }
	form[role=login] img { max-width: 160px !important; }
	.promo-banner { padding: 13px 15px; gap: 12px; }
}