/* ================================================================
   login_modal.css — OAuth login-popup (Facebook, Google, Apple)
   Bruger v2-tokens for at matche resten af sitet.
   Prefix: pfm-login-
   ================================================================ */

/* Trigger-knap i hovedmenuen — bruges af menu.php (.m3-item-login).
   Designet til at ligne den gamle .fb-custom-btn så layoutet ikke ændrer sig. */
.pfm-login-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	padding: 0 12px;
	background: var(--v2-primary, #4a9eff);
	color: var(--v2-primary-text, #fff);
	border: 0;
	border-radius: 4px;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: var(--v2-fs-13, 13px);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .15s ease, transform .1s ease;
}
.pfm-login-trigger:hover  { opacity: .9; }
.pfm-login-trigger:active { transform: translateY(1px); }
.pfm-login-trigger-icon   { display: inline-flex; line-height: 0; }
.pfm-login-trigger-icon svg { display: block; }
@media (max-width: 700px) {
	.pfm-login-trigger { height: 32px; padding: 0 14px; }
	.pfm-login-trigger-icon svg { width: 22px; height: 22px; }
}


.pfm-login-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
}
/* Sørg for at modalen ER skjult når hidden-attributten er sat — uanset
   andre CSS-regler der måtte sætte display på matching tags. */
.pfm-login-modal[hidden] { display: none !important; }

.pfm-login-backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.65);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	animation: pfmLoginFadeIn .18s ease;
}

.pfm-login-dialog {
	position: relative;
	z-index: 1;
	max-width: 380px;
	width: calc(100% - 32px);
	background: var(--v2-surface, #262830);
	border: 1px solid var(--v2-line, rgba(255,255,255,.08));
	border-radius: 14px;
	padding: 26px 26px 22px;
	box-shadow: 0 20px 60px rgba(0,0,0,.6);
	color: var(--v2-text, #e4e6eb);
	font-family: tahoma, sans-serif;
	animation: pfmLoginPopIn .22s cubic-bezier(.2,.8,.2,1);
}

.pfm-login-x {
	position: absolute; top: 8px; right: 12px;
	background: transparent; border: 0;
	color: var(--v2-text-2, #aab0bc);
	font-size: 26px; line-height: 1; cursor: pointer;
	width: 32px; height: 32px;
	border-radius: 50%;
	font-family: inherit;
}
.pfm-login-x:hover { background: rgba(255,255,255,.08); color: var(--v2-text, #fff); }

.pfm-login-header { text-align: center; margin-bottom: 18px; }
.pfm-login-logo {
	font-size: 22px; font-weight: 800; letter-spacing: 2px;
	color: var(--v2-primary, #4a9eff);
	margin-bottom: 8px;
}
.pfm-login-header h2 {
	font-size: 17px; font-weight: 600; margin: 0 0 4px;
	color: var(--v2-text, #fff);
}
.pfm-login-sub {
	font-size: 12px; color: var(--v2-text-2, #aab0bc);
	margin: 0;
}

.pfm-login-buttons {
	display: flex; flex-direction: column; gap: 10px;
	margin: 8px 0 18px;
}

.pfm-login-btn {
	display: flex; align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px; font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity .2s, transform .1s, background .2s;
	font-family: inherit;
}
.pfm-login-btn:hover  { opacity: .92; text-decoration: none; }
.pfm-login-btn:active { transform: translateY(1px); }
.pfm-login-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
}
.pfm-login-label { flex: 1; text-align: left; }

.pfm-login-fb {
	background: #1877F2;
	color: #fff;
}
.pfm-login-google {
	background: #fff;
	color: #1f1f1f;
	border-color: #dadce0;
}
/* Dark-mode variant — Google's officielle dark-style for Sign in-knappen.
   Mørk baggrund (#131314), hvid tekst, samme farvede G-logo.
   Aktiveres af PartyFM's body.v2-dark wrapper. */
body.v2-dark .pfm-login-google,
.v2-dark .pfm-login-google {
	background: #131314;
	color: #e3e3e3;
	border-color: #8e918f;
}
.pfm-login-apple {
	background: #000;
	color: #fff;
}

.pfm-login-empty {
	padding: 22px 14px;
	text-align: center;
	font-size: 14px;
	color: var(--v2-text-2, #aab0bc);
	background: var(--v2-bg, #1a1c22);
	border: 1px dashed var(--v2-line, rgba(255,255,255,.12));
	border-radius: 8px;
}

.pfm-login-foot {
	font-size: 11px; line-height: 1.55;
	text-align: center;
	color: var(--v2-text-2, #aab0bc);
	padding-top: 12px;
	border-top: 1px solid var(--v2-line, rgba(255,255,255,.08));
}
.pfm-login-foot a {
	color: var(--v2-primary, #4a9eff);
	text-decoration: underline;
}

body.pfm-login-modal-open { overflow: hidden; }

@keyframes pfmLoginFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes pfmLoginPopIn {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile */
@media (max-width: 420px) {
	.pfm-login-dialog { padding: 22px 18px 18px; border-radius: 12px; }
	.pfm-login-btn { padding: 11px 14px; font-size: 13px; }
}

/* Flash-besked vist efter OAuth linking — top-banner over indholdet. */
.pfm-oauth-flash {
	position: fixed;
	top: 16px; left: 50%;
	transform: translateX(-50%);
	max-width: 540px; width: calc(100% - 32px);
	background: var(--v2-surface, #262830);
	border: 1px solid var(--v2-primary, #4a9eff);
	color: var(--v2-text, #fff);
	padding: 14px 44px 14px 16px;
	border-radius: 10px;
	font-family: tahoma, sans-serif;
	font-size: 14px; line-height: 1.4;
	box-shadow: 0 12px 40px rgba(0,0,0,.5);
	z-index: 99998;
	display: flex; align-items: center; gap: 12px;
	animation: pfmFlashIn .35s cubic-bezier(.2,.8,.2,1);
}
.pfm-oauth-flash-icon {
	flex: 0 0 28px;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--v2-primary, #4a9eff);
	color: var(--v2-primary-text, #fff);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 16px;
}
.pfm-oauth-flash-error {
	border-color: #ff5050;
}
.pfm-oauth-flash-error .pfm-oauth-flash-icon {
	background: #ff5050;
	color: #fff;
}
.pfm-oauth-flash-x {
	position: absolute; top: 8px; right: 10px;
	background: transparent; border: 0;
	color: var(--v2-text-2, #aab0bc);
	font-size: 22px; line-height: 1; cursor: pointer;
	width: 28px; height: 28px;
	border-radius: 50%;
}
.pfm-oauth-flash-x:hover { background: rgba(255,255,255,.08); color: var(--v2-text, #fff); }

@keyframes pfmFlashIn {
	from { opacity: 0; transform: translate(-50%, -10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}