/**
 * SiteGate - Public Styles
 *
 * Utilizza CSS Custom Properties (variabili) per permettere
 * la personalizzazione dal backend e mantenere consistenza.
 */

/* =====================================================
   CSS VARIABLES
   ===================================================== */
.sitegate-wrapper {
	/* Colori principali */
	--sp-auth-primary: #4a90d9;
	--sp-auth-primary-hover: #3a7bc8;
	--sp-auth-secondary: #6c757d;
	--sp-auth-success: #28a745;
	--sp-auth-error: #dc3545;

	/* Sfondo e bordi */
	--sp-auth-bg: #f8f9fa;
	--sp-auth-card-bg: #ffffff;
	--sp-auth-border: #dee2e6;
	--sp-auth-border-light: #bdbdbd;

	/* Testo */
	--sp-auth-text: #333333;
	--sp-auth-text-muted: #6c757d;
	--sp-auth-text-light: #757575;

	/* Pulsanti */
	--sp-auth-btn-primary-bg: var(--sp-auth-primary);
	--sp-auth-btn-primary-text: #ffffff;
	--sp-auth-btn-primary-hover: var(--sp-auth-primary-hover);
	--sp-auth-btn-secondary-bg: var(--sp-auth-secondary);
	--sp-auth-btn-secondary-text: #ffffff;

	/* Dimensioni */
	--sp-auth-radius: 8px;
	--sp-auth-radius-sm: 4px;

	/* File upload */
	--sp-auth-upload-bg: #fafafa;
	--sp-auth-upload-hover-bg: #e3f2fd;
	--sp-auth-upload-success-bg: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	--sp-auth-upload-success-border: #a5d6a7;
	--sp-auth-upload-success-text: #2e7d32;
}

/* =====================================================
   OVERRIDE TEMA - rimuovi card dal contenitore pagina
   ===================================================== */
.stringup-theme-page-content {
	background: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	border: none !important;
}

/* Quando c'è bg-image, rendi trasparente tutto il contesto pagina */
body:has(.sitegate-wrapper.has-bg-image) {
	background: transparent !important;
}

body:has(.sitegate-wrapper.has-bg-image) .stringup-theme-content,
body:has(.sitegate-wrapper.has-bg-image) .stringup-theme-page,
body:has(.sitegate-wrapper.has-bg-image) .stringup-theme-page-content,
body:has(.sitegate-wrapper.has-bg-image) .site-content,
body:has(.sitegate-wrapper.has-bg-image) .entry-content,
body:has(.sitegate-wrapper.has-bg-image) main,
body:has(.sitegate-wrapper.has-bg-image) #content,
body:has(.sitegate-wrapper.has-bg-image) .content-area {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}

/* Nasconde il TITOLO DELLA PAGINA stampato dal tema ospitante (es. "Registrati"
   / "Accedi" mostrato da Divi sopra al form) su qualsiasi pagina che contiene
   il form Sitegate. Su temi che non stampano il titolo di pagina (es.
   spoortix-theme) la regola non trova nulla, quindi è del tutto innocua. */
body:has(.sitegate-wrapper) .entry-title,
body:has(.sitegate-wrapper) .page-title,
body:has(.sitegate-wrapper) .et_pb_post_title .et_pb_title_container,
body:has(.sitegate-wrapper) .et_pb_title_container > .entry-title {
	display: none !important;
}

/* =====================================================
   WRAPPER & LAYOUT
   ===================================================== */
.sitegate-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	position: relative;
	min-height: 100vh;
}

/* Forza il font su TUTTI gli elementi figli (fix WordPress <code> wrapper e altri override) */
.sitegate-wrapper,
.sitegate-wrapper *,
.sitegate-wrapper code,
.sitegate-wrapper pre,
.sitegate-wrapper h1,
.sitegate-wrapper h2,
.sitegate-wrapper h3,
.sitegate-wrapper p,
.sitegate-wrapper label,
.sitegate-wrapper span,
.sitegate-wrapper a,
.sitegate-wrapper input,
.sitegate-wrapper select,
.sitegate-wrapper textarea,
.sitegate-wrapper button {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
}

/* Sfondo a tutto schermo quando c'è immagine di sfondo */
.sitegate-wrapper.has-bg-image::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-image: var(--sp-auth-bg-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -2;
}

/* Overlay scuro sopra lo sfondo */
.sitegate-wrapper.has-bg-image::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.4);
	z-index: -1;
}

.sitegate-wrapper.has-bg-image > * {
	position: relative;
	z-index: 1;
}

/* =====================================================
   CARD
   ===================================================== */
.sitegate-card {
	background: var(--sp-auth-card-bg);
	border-radius: var(--sp-auth-radius);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	padding: 40px;
	width: 100%;
	max-width: 420px;
}

.sitegate-card-wide {
	max-width: 560px;
}

/* =====================================================
   LOGO & SITE NAME
   ===================================================== */
.sitegate-logo {
	text-align: center;
	margin-bottom: 32px;
}

.sitegate-logo img {
	max-width: 180px;
	max-height: 60px;
	object-fit: contain;
}

.sitegate-site-name {
	text-align: center;
	margin-bottom: 32px;
}

.sitegate-site-name h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--sp-auth-primary);
	margin: 0;
}

/* =====================================================
   HEADER
   ===================================================== */
.sitegate-header {
	text-align: center;
	margin-bottom: 24px;
}

.sitegate-header h2 {
	font-size: 22px;
	font-weight: 600;
	color: var(--sp-auth-text);
	margin: 0 0 8px;
}

.sitegate-header p {
	font-size: 14px;
	color: var(--sp-auth-text-muted);
	margin: 0;
}

/* --- Personalizzazioni step principali (login / registrazione) --- */

/* Nasconde il titolo "Accedi" / "Registrati" sopra al form.
   Solo gli step principali: OTP, codice, password, successo restano invariati. */
#step-login > .sitegate-header > h2,
#step-register > .sitegate-header > h2 {
	display: none;
}

/* Sottotitolo di benvenuto leggermente più grande, uguale su entrambe le pagine
   ("Inserisci le tue credenziali per accedere." / "Benvenuto! Compila il form…"). */
#step-login > .sitegate-header > p,
#step-register > .sitegate-header > p {
	font-size: 16px;
}

/* =====================================================
   FORM
   ===================================================== */
.sitegate-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* =====================================================
   FIELD
   ===================================================== */
.sitegate-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sitegate-field label {
	font-size: 14px;
	font-weight: 500;
	color: var(--sp-auth-text);
}

.sitegate-field label .required {
	color: var(--sp-auth-error);
}

.sitegate-field input[type="text"],
.sitegate-field input[type="email"],
.sitegate-field input[type="password"],
.sitegate-field input[type="tel"],
.sitegate-field input[type="date"],
.sitegate-field input[type="number"],
.sitegate-field .sitegate-select,
.sitegate-field .sitegate-textarea {
	width: 100%;
	padding: 12px 14px;
	font-size: 15px;
	border: 1px solid var(--sp-auth-border);
	border-radius: var(--sp-auth-radius);
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	background-color: var(--sp-auth-card-bg);
	color: var(--sp-auth-text);
}

.sitegate-field input:focus {
	outline: none;
	border-color: var(--sp-auth-primary);
	box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
}

/* =====================================================
   PASSWORD TOGGLE (occhio mostra/nascondi)
   ===================================================== */
.sitegate-password-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.sitegate-password-wrapper input {
	padding-right: 44px !important;
}

.sitegate-toggle-pw {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--sp-auth-text-muted, #94a3b8);
	line-height: 0;
	transition: color 0.2s;
}

.sitegate-toggle-pw:hover {
	color: var(--sp-auth-text, #334155);
}

.sitegate-toggle-pw:focus {
	outline: none;
}

/* =====================================================
   TEXTAREA & SELECT
   ===================================================== */
.sitegate-field .sitegate-textarea {
	min-height: 80px;
	resize: vertical;
}

.sitegate-field .sitegate-select {
	appearance: auto;
}

/* =====================================================
   OTP INPUT
   ===================================================== */
.sitegate-otp-input {
	text-align: center;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 8px;
	padding: 16px;
}

/* =====================================================
   HINT TEXT
   ===================================================== */
.sitegate-hint {
	font-size: 12px;
	color: var(--sp-auth-text-muted);
}

/* =====================================================
   LAYOUT - ROWS & COLUMNS (legacy)
   ===================================================== */
.sitegate-row {
	display: flex;
	gap: 16px;
}

.sitegate-col-6,
.sitegate-col-4 {
	flex: 1;
}

/* =====================================================
   RESPONSIVE GRID SYSTEM
   ===================================================== */
.sitegate-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Desktop (default) */
.kw-col-12 { flex: 0 0 100%; max-width: 100%; }
.kw-col-6  { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); }
.kw-col-3  { flex: 0 0 calc(25% - 12px); max-width: calc(25% - 12px); }
.kw-col-1-5 { flex: 0 0 calc(12.5% - 14px); max-width: calc(12.5% - 14px); }
.kw-col-1  { flex: 0 0 calc(8.333% - 14.67px); max-width: calc(8.333% - 14.67px); }

/* Tablet (601px - 1024px) */
@media (max-width: 1024px) {
	.kw-tab-12 { flex: 0 0 100% !important; max-width: 100% !important; }
	.kw-tab-6  { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
	.kw-tab-3  { flex: 0 0 calc(25% - 12px) !important; max-width: calc(25% - 12px) !important; }
	.kw-tab-1-5 { flex: 0 0 calc(12.5% - 14px) !important; max-width: calc(12.5% - 14px) !important; }
	.kw-tab-1  { flex: 0 0 calc(8.333% - 14.67px) !important; max-width: calc(8.333% - 14.67px) !important; }
}

/* Mobile (fino a 600px) */
@media (max-width: 600px) {
	.kw-mob-12 { flex: 0 0 100% !important; max-width: 100% !important; }
	.kw-mob-6  { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; }
	.kw-mob-3  { flex: 0 0 calc(25% - 12px) !important; max-width: calc(25% - 12px) !important; }
	.kw-mob-1-5 { flex: 0 0 calc(12.5% - 14px) !important; max-width: calc(12.5% - 14px) !important; }
	.kw-mob-1  { flex: 0 0 calc(8.333% - 14.67px) !important; max-width: calc(8.333% - 14.67px) !important; }
}

/* =====================================================
   CHECKBOX
   ===================================================== */
.sitegate-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
	color: var(--sp-auth-text);
}

.sitegate-checkbox input[type="checkbox"] {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	accent-color: var(--sp-auth-primary);
}

/* =====================================================
   RADIO
   ===================================================== */
.sitegate-radio-group {
	display: flex;
	gap: 8px;
}

.sitegate-radio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	background: var(--sp-auth-card-bg);
	border: 2px solid var(--sp-auth-border);
	border-radius: var(--sp-auth-radius);
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-auth-text-muted);
	cursor: pointer;
	transition: all 0.2s ease;
	flex: 1 1 auto;
	text-align: center;
}

.sitegate-radio:hover {
	border-color: var(--sp-auth-primary);
	background: rgba(74, 144, 217, 0.06);
	color: var(--sp-auth-primary);
}

.sitegate-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.sitegate-radio input[type="radio"]:checked + span {
	color: inherit;
}

.sitegate-radio:has(input[type="radio"]:checked) {
	background: var(--sp-auth-primary);
	border-color: var(--sp-auth-primary);
	color: #ffffff;
}

/* =====================================================
   LINK
   ===================================================== */
.sitegate-link {
	font-size: 14px;
	color: var(--sp-auth-primary);
	text-decoration: none;
}

.sitegate-link:hover {
	text-decoration: underline;
}

/* =====================================================
   MESSAGE
   ===================================================== */
.sitegate-message {
	padding: 12px 16px;
	border-radius: var(--sp-auth-radius);
	font-size: 14px;
	display: none;
}

.sitegate-message.success {
	display: block;
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

.sitegate-message.error {
	display: block;
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

/* Avviso dentro al form più compatto: il form ha gap di 16px, che attorno
   al messaggio (es. "credenziali non valide") creava troppo spazio sopra e
   sotto. I margini negativi riducono quel gap senza toccare gli altri campi. */
.sitegate-form > .sitegate-message {
	margin-top: -8px;
	margin-bottom: -8px;
}

/* =====================================================
   BUTTONS

   Usa alta specificità per evitare override da temi.
   Le variabili CSS vengono risolte nel contesto del wrapper.
   ===================================================== */

/* Base button styles */
.sitegate-wrapper .sitegate-btn {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 600;
	border: none;
	border-radius: var(--sp-auth-radius);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
}

.sitegate-wrapper .sitegate-btn:active {
	transform: scale(0.98);
}

/* Primary button */
.sitegate-wrapper .sitegate-btn.sitegate-btn-primary {
	background-color: var(--sp-auth-btn-primary-bg);
	color: var(--sp-auth-btn-primary-text);
}

.sitegate-wrapper .sitegate-btn.sitegate-btn-primary:hover {
	background-color: var(--sp-auth-btn-primary-hover);
}

/* Secondary button */
.sitegate-wrapper .sitegate-btn.sitegate-btn-secondary {
	background-color: var(--sp-auth-btn-secondary-bg);
	color: var(--sp-auth-btn-secondary-text);
}

.sitegate-wrapper .sitegate-btn.sitegate-btn-secondary:hover {
	opacity: 0.9;
}

/* Button loading state */
.sitegate-btn.loading .btn-text {
	opacity: 0;
}

.sitegate-btn .btn-loader {
	display: none;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sp-auth-spin 0.8s linear infinite;
	position: absolute;
}

.sitegate-btn.loading .btn-loader {
	display: block;
}

.sitegate-btn.loading {
	position: relative;
	pointer-events: none;
}

@keyframes sp-auth-spin {
	to { transform: rotate(360deg); }
}

/* =====================================================
   FOOTER
   ===================================================== */
.sitegate-footer {
	text-align: center;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--sp-auth-border);
}

.sitegate-footer p {
	font-size: 14px;
	color: var(--sp-auth-text-muted);
	margin: 0;
}

.sitegate-footer a {
	color: var(--sp-auth-primary);
	text-decoration: none;
	font-weight: 500;
}

.sitegate-footer a:hover {
	text-decoration: underline;
}

/* =====================================================
   PRIVACY POLICY SECTION
   ===================================================== */
.sitegate-privacy-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--sp-auth-border);
}

.sitegate-privacy-section > label {
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-auth-text);
}

.sitegate-privacy-section > label .required {
	color: var(--sp-auth-error);
}

.sitegate-privacy-box {
	max-height: 200px;
	overflow-y: auto;
	padding: 16px;
	background: var(--sp-auth-bg);
	border: 1px solid var(--sp-auth-border);
	border-radius: var(--sp-auth-radius);
	font-size: 13px;
	line-height: 1.6;
	color: var(--sp-auth-text);
}

.sitegate-privacy-box p {
	margin: 0 0 12px;
}

.sitegate-privacy-box p:last-child {
	margin-bottom: 0;
}

.sitegate-privacy-box h3,
.sitegate-privacy-box h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 16px 0 8px;
}

.sitegate-privacy-box h3:first-child,
.sitegate-privacy-box h4:first-child {
	margin-top: 0;
}

.sitegate-privacy-box ul,
.sitegate-privacy-box ol {
	margin: 8px 0;
	padding-left: 20px;
}

.sitegate-privacy-box li {
	margin-bottom: 4px;
}

/* =====================================================
   CONSENTS SECTION
   ===================================================== */
.sitegate-consents {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--sp-auth-bg);
	border-radius: var(--sp-auth-radius);
	border: 1px solid var(--sp-auth-border);
}

.sitegate-consents .sitegate-field {
	gap: 0;
}

.sitegate-consents .sitegate-checkbox span {
	line-height: 1.5;
}

.sitegate-consents .sitegate-checkbox a {
	color: var(--sp-auth-primary);
	text-decoration: none;
}

.sitegate-consents .sitegate-checkbox a:hover {
	text-decoration: underline;
}

/* =====================================================
   OTP BUTTON
   ===================================================== */
#btn-otp-login {
	margin-top: 8px;
	width: 100%;
}

/* =====================================================
   SUCCESS ICON
   ===================================================== */
.sitegate-success .sitegate-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	background: var(--sp-auth-success);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}

/* =====================================================
   FILE UPLOAD - CERTIFICATE FIELD
   ===================================================== */
.sitegate-wrapper .sitegate-certificate-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--sp-auth-border);
}

.sitegate-wrapper .sitegate-file-upload {
	position: relative;
	display: block;
}

/* File input - invisible but clickable overlay */
.sitegate-wrapper .sitegate-file-upload input[type="file"] {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	top: 0;
	left: 0;
}

/* Upload button/drop zone */
.sitegate-wrapper .sitegate-file-upload-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px 20px;
	border: 2px dashed var(--sp-auth-border-light);
	border-radius: var(--sp-auth-radius);
	background-color: var(--sp-auth-upload-bg);
	color: var(--sp-auth-text-light);
	transition: all 0.2s ease;
	cursor: pointer;
	font-size: 14px;
	min-height: 70px;
	box-sizing: border-box;
}

.sitegate-wrapper .sitegate-file-upload:hover .sitegate-file-upload-btn {
	border-color: var(--sp-auth-primary);
	background-color: var(--sp-auth-upload-hover-bg);
	color: var(--sp-auth-primary);
}

.sitegate-wrapper .sitegate-file-upload-btn .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	line-height: 28px;
}

.sitegate-wrapper .sitegate-file-upload-btn .file-text {
	font-weight: 500;
}

/* File preview (after selection) */
.sitegate-wrapper .sitegate-file-preview {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--sp-auth-upload-success-bg);
	border: 1px solid var(--sp-auth-upload-success-border);
	border-radius: var(--sp-auth-radius);
	box-shadow: 0 2px 4px rgba(76, 175, 80, 0.15);
}

.sitegate-wrapper .sitegate-file-preview::before {
	content: "\f313";
	font-family: dashicons;
	font-size: 20px;
	color: #43a047;
	margin-right: 10px;
}

.sitegate-wrapper .sitegate-file-preview .file-name {
	font-size: 14px;
	color: var(--sp-auth-upload-success-text);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.sitegate-wrapper .sitegate-file-preview .remove-file {
	background: var(--sp-auth-card-bg);
	border: 1px solid #e57373;
	color: #c62828;
	font-size: 16px;
	cursor: pointer;
	padding: 4px 10px;
	line-height: 1;
	border-radius: var(--sp-auth-radius-sm);
	transition: all 0.2s ease;
	margin-left: 12px;
}

.sitegate-wrapper .sitegate-file-preview .remove-file:hover {
	background: #ffebee;
	border-color: #c62828;
	color: #b71c1c;
}

/* Hide upload button when file is selected */
.sitegate-wrapper .sitegate-file-upload.has-file .sitegate-file-upload-btn {
	display: none;
}

/* Keep file input accessible but visually hidden when file selected
   IMPORTANT: Don't use display:none or visibility:hidden,
   otherwise the file won't be included in FormData */
.sitegate-wrapper .sitegate-file-upload.has-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Upload status message */
.sitegate-upload-status {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: var(--sp-auth-radius);
	font-size: 13px;
	display: none;
}

.sitegate-upload-status.uploading {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #e3f2fd;
	color: #1565c0;
	border: 1px solid #90caf9;
}

.sitegate-upload-status.success {
	display: block;
	background: #e8f5e9;
	color: var(--sp-auth-upload-success-text);
	border: 1px solid var(--sp-auth-upload-success-border);
}

.sitegate-upload-status.error {
	display: block;
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef9a9a;
}

/* =====================================================
   PROFILE PAGE — Redesign moderno Stringup
   ===================================================== */
.sitegate-profile-wrapper {
	min-height: auto;
	padding: 24px 16px;
	background: #F9FAFB;
	align-items: flex-start;
}

.sitegate-profile-card {
	max-width: 680px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	box-shadow: none;
	background: transparent;
	border: none;
}

/* --- Avatar Header --- */
.sitegate-profile-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	padding: 24px;
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
}

.sitegate-profile-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sp-auth-primary, #007AFF), var(--sp-auth-primary-hover, #0056CC));
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
	letter-spacing: 1px;
}

.sitegate-profile-user-info h2 {
	font-size: 20px;
	font-weight: 700;
	color: #1F2937;
	margin: 0 0 4px;
}

.sitegate-profile-user-info p {
	font-size: 14px;
	color: #6B7280;
	margin: 0;
}

/* --- Section Cards (Stringup pattern: white + 3px top border) --- */
.sitegate-profile-section {
	background: #ffffff;
	border: 1px solid #E5E7EB;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
}

.sitegate-profile-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #D1D5DB;
}

/* Varianti colore */
.sitegate-profile-section-primary::before { background: #007AFF; }
.sitegate-profile-section-info::before    { background: #3B82F6; }
.sitegate-profile-section-success::before  { background: #10B981; }
.sitegate-profile-section-warning::before   { background: #FF9500; }

/* Section header */
.sitegate-profile-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #F3F4F6;
}

.sitegate-profile-section-header .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: #6B7280;
}

.sitegate-profile-section-header h3 {
	font-size: 16px;
	font-weight: 600;
	color: #1F2937;
	margin: 0;
}

/* --- Focus ring stile Stringup --- */
.sitegate-profile-wrapper .sitegate-field input:focus,
.sitegate-profile-wrapper .sitegate-field select:focus,
.sitegate-profile-wrapper .sitegate-field textarea:focus {
	outline: none;
	border-color: #007AFF;
	box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

/* --- Profile save button dentro sezione --- */
.sitegate-profile-section .sitegate-btn {
	margin-top: 8px;
}

/* --- Profile message globale --- */
.sitegate-profile-card > .sitegate-message {
	margin-bottom: 16px;
	border-radius: 8px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 600px) {
	/* Su mobile, quando il form è incorporato nella pagina (senza immagine di
	   sfondo a tutto schermo), evita il centraggio verticale su 100vh: quello
	   spingeva il form a metà schermo lasciando un grande spazio vuoto sotto
	   l'header. Allinea in alto e lascia che il wrapper si adatti al contenuto. */
	.sitegate-wrapper:not(.has-bg-image) {
		min-height: auto;
		align-items: flex-start;
		/* Gutter minimi ai lati = form alla massima larghezza del telefono. */
		padding: 16px 6px;
	}

	/* Su telefono il form occupa tutta la larghezza disponibile (niente cap a
	   420/560px): si adatta alla larghezza del dispositivo. Sui tablet, invece,
	   resta valido il max-width della card base (vista centrata). */
	.sitegate-card,
	.sitegate-card-wide {
		max-width: 100%;
		/* Padding interno ridotto: input più larghi e meno spazio sprecato. */
		padding: 22px 16px;
	}

	/* Spazi verticali più compatti su mobile. */
	.sitegate-logo,
	.sitegate-site-name {
		margin-bottom: 20px;
	}

	.sitegate-header {
		margin-bottom: 16px;
	}

	.sitegate-row {
		flex-direction: column;
	}

	.sitegate-radio-group {
		flex-direction: row;
		gap: 8px;
	}

	/* Profile responsive */
	.sitegate-profile-wrapper {
		padding: 16px 12px;
	}

	.sitegate-profile-header {
		flex-direction: column;
		text-align: center;
		padding: 20px 16px;
	}

	.sitegate-profile-avatar {
		width: 56px;
		height: 56px;
		font-size: 20px;
	}

	.sitegate-profile-section {
		padding: 16px;
		border-radius: 8px;
	}

	.sitegate-profile-section-header {
		margin-bottom: 12px;
		padding-bottom: 12px;
	}
}