/* ==========================================================
   Area membri: accesso, registrazione, password, errori, profilo, "Il mio spazio".
   I selettori partono da body per vincere sulle vecchie regole con !important di style.css.
   ========================================================== */

/* ---------- Impaginazione: testo a sinistra, modulo a destra ----------
   Solo nelle pagine con un modulo di accesso, registrazione o password. */
body .entry-content:has(> .um-login),
body .entry-content:has(> .um-register),
body .entry-content:has(> .um-password) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
	padding: calc(82px + clamp(32px, 6vw, 88px)) var(--gs-gutter) clamp(56px, 8vw, 112px) !important;
}
body .entry-content:has(> .um-login) > .gs-um-intro,
body .entry-content:has(> .um-register) > .gs-um-intro,
body .entry-content:has(> .um-password) > .gs-um-intro {
	position: sticky;
	top: 120px;
	padding: 0 !important;
	background: none !important;
}
body .entry-content:has(> .um-login) > .um,
body .entry-content:has(> .um-register) > .um,
body .entry-content:has(> .um-password) > .um {
	grid-column: 2;
	grid-row: 1 / span 2;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(24px, 4vw, 40px) !important;
	border: 1px solid color-mix(in srgb, var(--gs-ink) 14%, transparent);
	border-radius: var(--gs-radius-lg);
	background: color-mix(in srgb, var(--gs-paper) 45%, #ffffff);
}
/* Pagina della password: niente introduzione nel contenuto, la aggiunge community.php */
body .entry-content:has(> .um-password):not(:has(> .gs-um-intro)) > .um { grid-column: 1 / -1; max-width: 560px !important; }

body .gs-um-intro .gs-title {
	margin: 0 0 16px;
	font-size: clamp(40px, 6vw, 80px) !important;
	line-height: 0.95;
}
body .gs-um-intro .gs-lead { max-width: 34ch; }

/* Passi della registrazione: numeri tondi come i pulsanti, legati da un filo */
body .gs-um-steps {
	display: grid !important;
	gap: 14px !important;
	margin: 28px 0 0 !important;
	font-size: 17px !important;
}
body .gs-um-steps li { align-items: center !important; gap: 14px !important; }
body .gs-um-steps li::before {
	flex: none;
	width: 36px !important;
	height: 36px !important;
	border-radius: var(--gs-radius-pill);
	background: var(--gs-ink) !important;
	color: var(--gs-paper) !important;
}

@media (max-width: 900px) {
	body .entry-content:has(> .um-login),
	body .entry-content:has(> .um-register),
	body .entry-content:has(> .um-password) {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-top: calc(80px + 32px) !important;
	}
	body .entry-content:has(> .um-login) > .gs-um-intro,
	body .entry-content:has(> .um-register) > .gs-um-intro,
	body .entry-content:has(> .um-password) > .gs-um-intro { position: static; }
	body .entry-content:has(> .um-login) > .um,
	body .entry-content:has(> .um-register) > .um,
	body .entry-content:has(> .um-password) > .um { grid-column: 1; grid-row: auto; }
}
@media (max-width: 420px) {
	body .entry-content:has(> .um-login) > .um,
	body .entry-content:has(> .um-register) > .um,
	body .entry-content:has(> .um-password) > .um {
		padding: 20px 16px !important;
		margin: 0 -8px !important;
	}
}

/* ---------- Campi ---------- */
body .um .um-form .um-field { padding: 0 0 18px !important; }
body .um .um-field-label { margin-bottom: 6px !important; }
body .um .um-field-label label {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--gs-ink) !important;
}
body .um .um-req { color: var(--gs-acid) !important; }
body .um .um-form input[type="text"],
body .um .um-form input[type="email"],
body .um .um-form input[type="password"],
body .um .um-form input[type="url"],
body .um .um-form input[type="number"],
body .um .um-form textarea,
body .um .um-form select:not(.select2-hidden-accessible) {
	box-sizing: border-box;
	width: 100% !important;
	min-height: var(--gs-control) !important;
	padding: 12px 16px !important;
	border: 2px solid color-mix(in srgb, var(--gs-ink) 28%, transparent) !important;
	border-radius: var(--gs-radius) !important;
	background: #fffdfa !important;
	color: var(--gs-ink) !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
	transition: border-color var(--gs-fast) var(--gs-ease);
}
body .um .um-form textarea { min-height: 140px !important; }
body .um .um-form input:hover,
body .um .um-form textarea:hover { border-color: color-mix(in srgb, var(--gs-ink) 55%, transparent) !important; }
body .um .um-form input:focus,
body .um .um-form textarea:focus,
body .um .um-form select:focus {
	border-color: var(--gs-ink) !important;
	outline: 3px solid var(--gs-ink) !important;
	outline-offset: 2px;
}
body .um .um-form input::placeholder { color: var(--gs-grey) !important; opacity: 1; }

/* Mostra password: area toccabile da 44px */
body .um .um-field-area-password { position: relative; }
body .um .um-toggle-password {
	display: grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	top: 50% !important;
	right: 4px !important;
	margin-top: -22px !important;
	border-radius: var(--gs-radius-pill);
	color: var(--gs-grey) !important;
}
body .um .um-toggle-password:hover { color: var(--gs-ink) !important; }

/* Selezione multipla (discipline) */
body .um .um-field-area .select2.select2-container .select2-selection,
body .um .select2-container .select2-selection {
	min-height: var(--gs-control) !important;
	padding: 6px 10px !important;
	border: 2px solid color-mix(in srgb, var(--gs-ink) 28%, transparent) !important;
	border-radius: var(--gs-radius) !important;
	background: #fffdfa !important;
}
body .um .um-field-area .select2-container--focus .select2-selection,
body .um .um-field-area .select2-container--open .select2-selection,
body .um .select2-container--focus .select2-selection,
body .um .select2-container--open .select2-selection { border-color: var(--gs-ink) !important; }
body .um .select2-selection__choice {
	padding: 4px 10px !important;
	border: 0 !important;
	border-radius: var(--gs-radius-pill) !important;
	background: var(--gs-pink) !important;
	color: var(--gs-ink) !important;
	font-size: 15px !important;
}

/* Caselle di consenso: righe toccabili, testo leggibile */
body .um .um-field-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	min-height: var(--gs-control-sm);
	padding: 6px 0 !important;
	cursor: pointer;
}
body .um .um-field-checkbox-state { position: static !important; flex: none; margin-top: 1px; }
body .um .um-field-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Focus da tastiera sulla casella nascosta: anello attorno al segno visibile */
body .um .um-field-checkbox:has(input:focus-visible) .um-field-checkbox-state { outline: 3px solid var(--gs-ink); outline-offset: 2px; border-radius: 6px; }
body .um .um-field-checkbox-state i { font-size: 26px !important; color: var(--gs-ink) !important; }
body .um .um-field-checkbox.active .um-field-checkbox-state i { color: var(--gs-acid) !important; }
body .um .um-field-checkbox-option {
	margin: 0 !important;
	padding: 2px 0 0 !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--gs-ink) !important;
}

/* ---------- Pulsanti e link del modulo ---------- */
body .um .um-col-alt { display: grid !important; gap: 12px; margin-top: 8px !important; }
body .um .um-col-alt .um-half,
body .um .um-col-alt .um-center { float: none !important; width: 100% !important; padding: 0 !important; }
body .um .um-col-alt .um-button { width: 100% !important; }
body .um .um-col-alt-b { margin-top: 16px !important; text-align: left !important; }
body .um .um-col-alt-b .um-link-alt,
body .um a.um-link-alt {
	display: inline-flex !important;
	text-align: left !important;
	align-items: center;
	gap: 0.4em;
	min-height: var(--gs-control-sm);
	color: var(--gs-ink) !important;
	font-weight: 600;
	text-decoration: none !important;
	transition: color var(--gs-fast) var(--gs-ease);
}
body .um a.um-link-alt::after {
	content: "";
	width: 0.95em;
	height: 0.95em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--gs-fast) var(--gs-ease);
}
body .um a.um-link-alt:hover,
body .um a.um-link-alt:focus-visible { color: var(--gs-acid) !important; }
body .um a.um-link-alt:hover::after,
body .um a.um-link-alt:focus-visible::after { transform: translateX(var(--gs-nudge)); }

/* Invio in corso (classe messa da site.js): il pulsante resta, si capisce che sta lavorando */
body .um .um-button.gs-is-busy {
	cursor: progress !important;
	opacity: 0.85;
	background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255, 255, 255, 0.14) 10px 20px) !important;
	background-size: 28px 28px !important;
	animation: gs-busy 0.8s linear infinite;
}
@keyframes gs-busy { to { background-position: 28px 0; } }

/* ---------- Errori e avvisi ----------
   Errori sotto il campo, in rame scuro con un segno, non un blocco pieno che copre il modulo. */
body .um .um-field-error {
	position: static !important;
	display: flex !important;
	gap: 8px;
	align-items: flex-start;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	color: var(--gs-acid-deep) !important;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.4 !important;
}
body .um .um-field-error::before {
	content: "!";
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gs-acid-deep);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}
body .um .um-field-error .um-field-arrow { display: none !important; }
body .um .um-form .um-error,
body .um .um-form input.um-error { border-color: var(--gs-acid) !important; }

body .um .um-notice,
body .um-postmessage {
	position: relative;
	margin: 0 0 20px !important;
	padding: 14px 18px 14px 20px !important;
	border: 0 !important;
	border-left: 4px solid var(--gs-acid) !important;
	border-radius: var(--gs-radius) !important;
	background: color-mix(in srgb, var(--gs-acid) 10%, var(--gs-paper)) !important;
	color: var(--gs-ink) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}
body .um .um-notice.success,
body .um-postmessage { border-left-color: var(--gs-ink) !important; background: var(--gs-pink) !important; }
body .um .um-notice a { color: var(--gs-ink) !important; text-decoration: underline; }
body .um .um-notice i { display: none; }

/* ---------- Community: schede dei membri ---------- */
body .um .um-member {
	border: 1px solid color-mix(in srgb, var(--gs-ink) 14%, transparent) !important;
	border-radius: var(--gs-radius-lg) !important;
	overflow: hidden;
}
body .um .um-member-photo img,
body .um .um-profile-photo img,
body .um .um-profile-photo a.um-profile-photo-img { border-radius: 50% !important; }
body .um .um-member-directory-search-line .um-do-search { border-radius: var(--gs-radius-pill) !important; }

/* ---------- Profilo e account (solo con accesso) ---------- */
body .um .um-profile-nav { border-radius: var(--gs-radius-lg); margin-top: 16px !important; }
body .um .um-profile-nav-item a { border-radius: var(--gs-radius-pill) !important; }
body .um .um-account-side li a { border-radius: var(--gs-radius) !important; }
body .um .um-account-side li a.current,
body .um .um-account-side li a.current:hover { background: var(--gs-ink) !important; color: var(--gs-paper) !important; }

/* ---------- Il mio spazio ----------
   Benvenuto in alto a tutta larghezza; sotto, su schermi larghi, caricamento e materiali affiancati. */
body .gs-ws {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px !important;
}
body .gs-ws > .gs-ws__msg,
body .gs-ws > .gs-ws__welcome,
body .gs-ws > .gs-ws__card:last-child { grid-column: 1 / -1; }
body .gs-ws__card {
	border: 1px solid color-mix(in srgb, var(--gs-ink) 14%, transparent) !important;
	border-radius: var(--gs-radius-lg) !important;
	background: color-mix(in srgb, var(--gs-paper) 45%, #ffffff) !important;
}
body .gs-ws__welcome {
	background: var(--gs-ink) !important;
	color: var(--gs-paper);
	--s-fg: var(--gs-paper);
	--s-muted: var(--gs-pink);
	--s-btn-bg: var(--gs-paper);
	--s-btn-fg: var(--gs-ink);
	--s-btn-bg-hover: var(--gs-acid-light);
	--s-btn-fg-hover: var(--gs-ink);
	--s-btn-line: var(--gs-paper);
	--s-focus: var(--gs-paper);
	--s-focus-halo: var(--gs-ink);
}
body .gs-ws__welcome h2 { color: var(--gs-paper) !important; font-size: clamp(28px, 3.4vw, 44px) !important; }
body .gs-ws__welcome .gs-ws__small { color: var(--gs-pink) !important; }
body .gs-ws__meter {
	height: 8px !important;
	border-radius: var(--gs-radius-pill);
	background: color-mix(in srgb, var(--gs-paper) 22%, transparent) !important;
	overflow: hidden;
}
body .gs-ws__meter span { border-radius: var(--gs-radius-pill); background: var(--gs-acid-light) !important; }
body .gs-ws__form input[type="text"],
body .gs-ws__form select,
body .gs-ws__form textarea {
	min-height: var(--gs-control) !important;
	border: 2px solid color-mix(in srgb, var(--gs-ink) 28%, transparent) !important;
	border-radius: var(--gs-radius) !important;
	background: #fffdfa !important;
}
body .gs-ws__drop { border-radius: var(--gs-radius-lg) !important; border-color: color-mix(in srgb, var(--gs-ink) 35%, transparent) !important; }
body .gs-ws__tag { border-radius: var(--gs-radius-pill); padding: 3px 10px !important; }
body .gs-ws__msg { border-radius: var(--gs-radius) !important; border-left: 4px solid var(--gs-ink); background: var(--gs-pink) !important; color: var(--gs-ink) !important; }
body .gs-ws__msg--error,
body .gs-ws__msg--blocked { border-left-color: var(--gs-acid) !important; background: color-mix(in srgb, var(--gs-acid) 10%, var(--gs-paper)) !important; }
/* Stato vuoto: frase chiara con un segno, non una riga grigia persa */
body .gs-ws__empty {
	padding: 18px 20px;
	border: 2px dashed color-mix(in srgb, var(--gs-ink) 20%, transparent);
	border-radius: var(--gs-radius-lg);
	color: var(--gs-grey) !important;
}
@media (max-width: 860px) {
	body .gs-ws { grid-template-columns: minmax(0, 1fr); }
	body .gs-ws__two { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
	body .um .um-button.gs-is-busy { animation: none; }
}

/* Scheda attiva del profilo: crema sulla barra colorata, leggibile con ogni colore scelto dal membro */
body.um-page-user .um-profile-nav-item.active a {
	background: var(--gs-paper) !important;
	color: var(--gs-ink) !important;
}
body.um-page-user .um-profile-nav-item.active a i { color: var(--gs-ink) !important; }

/* ---------- Account ----------
   L'header è trasparente e sopra la pagina: senza spazio in alto la foto e il primo campo finivano sotto. */
body.um-page-account .site-main > article .entry-content {
	max-width: 1100px;
	margin: 0 auto;
	padding: calc(82px + clamp(32px, 5vw, 72px)) var(--gs-gutter) clamp(56px, 8vw, 112px) !important;
}
@media (max-width: 900px) {
	body.um-page-account .site-main > article .entry-content { padding-top: calc(80px + 28px) !important; }
}

/* Menu laterale dell'account: voci crema con bordo, la voce attiva espresso con testo crema (prima grigio su espresso, 2.6:1) */
body.um-page-account .um-account-side ul { display: grid; gap: 6px; }
body.um-page-account .um-account-side li { margin: 0 !important; background: none !important; }
body.um-page-account .um-account-side li a.um-account-link {
	display: flex !important;
	align-items: center;
	min-height: 48px;
	border: 1.5px solid color-mix(in srgb, var(--gs-ink) 22%, transparent);
	border-radius: var(--gs-radius) !important;
	background: var(--gs-surface, #f6f4f0) !important;
	color: var(--gs-ink) !important;
	transition: background-color var(--gs-fast) var(--gs-ease), border-color var(--gs-fast) var(--gs-ease);
}
body.um-page-account .um-account-side li a.um-account-link:hover { border-color: var(--gs-ink); }
body.um-page-account .um-account-side li a .um-account-title,
body.um-page-account .um-account-side li a .um-account-icon,
body.um-page-account .um-account-side li a .um-account-icon i,
body.um-page-account .um-account-side li a .um-account-arrow { color: inherit !important; }
body.um-page-account .um-account-side li a.um-account-link.current {
	border-color: var(--gs-ink);
	background: var(--gs-ink) !important;
	color: var(--gs-paper) !important;
}
body.um-page-account .um-account-side li a.um-account-link.current .um-account-icon i { color: var(--gs-acid-light) !important; }
body.um-page-account .um-account-side .um-account-icon { border-right-color: color-mix(in srgb, currentColor 25%, transparent) !important; }
body.um-page-account .um-account-side li a .um-account-arrow { margin-left: auto; align-self: center; line-height: 1; float: none !important; }
body.um-page-account .um-account-side li a .um-account-title { padding-top: 0 !important; padding-bottom: 0 !important; }

/* "Il mio spazio" sul telefono: le opzioni lunghe dei menu a tendina allargavano il modulo oltre lo schermo */
body .gs-ws > *,
body .gs-ws__card,
body .gs-ws__form,
body .gs-ws__form label,
body .gs-ws__two > * { min-width: 0; }
body .gs-ws__form :is(input:not([type="checkbox"]), select, textarea) { width: 100%; max-width: 100%; min-width: 0; }

/* Profilo sul telefono: la copertina partiva sotto l'header; le schede mostrano anche il nome, non solo l'icona */
@media (max-width: 921px) {
	body.um-page-user .site-main > article .entry-content { padding-top: calc(80px + 16px) !important; }
	/* Ultimate Member scrive ogni scheda due volte: solo icona (telefono) e icona + nome. Teniamo la seconda. */
	body.um-page-user .um-profile-nav-item a.uimob800-show { display: none !important; }
	body.um-page-user .um-profile-nav-item a.uimob800-hide { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; padding: 8px 14px !important; }
	body.um-page-user .um-profile-nav-item a.uimob800-hide .title { display: inline !important; }
}