/* ====== OAuth list (buttons with logos) ====== */
.oauth-list{
	display:flex;
	flex-direction:column;
	gap:.75rem;
	margin-top:1.25rem;
}

.oauth-btn{
	display:flex;
	align-items:center;
	gap:.75rem;
	text-decoration:none;
	font-weight:700;
	border:1px solid var(--border);
	border-radius:12px;
	padding:.9rem 1rem;
	background:var(--surface);
	color:var(--text);
	box-shadow:0 1px 2px rgba(15,23,42,.06);
	transition:transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.oauth-btn:hover{background:#fff;box-shadow:0 4px 10px rgba(15,23,42,.10)}
.oauth-btn:active{transform:translateY(1px)}

.oauth-ico{
	width:28px;height:28px;
	border-radius:8px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 28px;
}

/* Provider-teman (mjuk, professionell) */
.oauth-google .oauth-ico{background:#ffffff;border:1px solid #e5e7eb}
.oauth-facebook .oauth-ico{background:#1877F2}
.oauth-microsoft .oauth-ico{background:#ffffff;border:1px solid #e5e7eb}
.oauth-apple .oauth-ico{background:#111827}

.oauth-label{
	flex:1 1 auto;
}

/* Mörk loggafärg där det behövs */
.oauth-facebook .oauth-ico svg path{fill:#ffffff}
.oauth-apple .oauth-ico svg path{fill:#ffffff}

/* Mobil: fullbredd (listan är redan kolumn) – ingen extra kod behövs */
@media(max-width:720px){
	.oauth-btn{padding:1rem 1.1rem}
	.oauth-ico{width:30px;height:30px;border-radius:10px}
}

/* ====== OAuth list: mobile spacing + centered content ====== */
@media (max-width:960px){
	.oauth-list{
		margin:1.25rem 5%;
	}

	.oauth-btn{
		justify-content:center;	/* centrera ikon + text som grupp */
		text-align:center;
		width:100%;
	}

	/* slå ut tidigare flex:1 som kan trycka texten åt vänster */
	.oauth-label{
		flex:0 0 auto;
	}

	/* håll ikonen kompakt men centrerad med gap */
	.oauth-ico{
		flex:0 0 28px;
	}
}

/* ====== OAuth list: fixed width on desktop ====== */
@media (min-width:961px){
	.oauth-list{
		max-width:380px;	/* ändra vid behov: 380–480px funkar fint */
		margin:1.25rem auto 0;	/* centrera listan */
		width:100%;
	}
	.oauth-btn{
		display:flex;			/* säkerställ att justify-content fungerar */
		justify-content:center;	/* centrera ikon + text även på desktop */
		width:100%;
	}
	.oauth-label{
		flex:0 0 auto;			/* hindra att texten dras åt vänster */
	}
	.oauth-ico{
		flex:0 0 28px;
	}
}

/* ====== Login page layout polish ====== */
#login.section{
	padding:96px 0 112px;	/* mer luft runt sektionen */
}

#login .container{
	max-width:760px;		/* lite smalare läsbredd */
}

#login .h1{
	text-align:center;
	margin:0 0 .5rem;
}

#login .lead{
	text-align:center;
	max-width:52ch;
	margin:0 auto 1.25rem;
	color:var(--muted);
}

/* knapplistan – redan centrerad i tidigare patchar; ge lite extra spacing */
#login .oauth-list{
	margin-top:1.5rem;
	gap:.85rem;
}

#login .oauth-btn{
	min-height:48px;
}

/* footnoteraden */
#login .note{
	text-align:center;
	margin-top:1rem;
}