/*
 * theFibra Member Area — botão «Guardar» e aviso (carregado só onde o botão pode aparecer).
 *
 * Os tokens estão no próprio botão (não dependem de nenhum contentor) e o administrador pode alterar as
 * cores em «theFibra Membros → Botão Guardar»: o plugin acrescenta um bloco CSS com as variáveis --tfms-*.
 * Variantes: --solid | --outline | --ghost · --sm | --md | --lg · --radius-square|rounded|pill · --icon-only.
 * Especificidade (0,1,1+) e estados explícitos para vencer as regras genéricas de `button` dos temas.
 */

.thefibra-member-save,
.thefibra-member-toast {
	--tfms-bg: #0e0e0e;
	--tfms-text: #ffffff;
	--tfms-border: rgba(255, 255, 255, 0.55);
	--tfms-on-bg: #ffffff;
	--tfms-on-text: #0e0e0e;
	--tfms-accent: #ffffff;
	--tfms-focus: #6ec1e4;
	box-sizing: border-box;
}

button.thefibra-member-save {
	--tfms-h: 44px;
	--tfms-fs: 12px;
	--tfms-px: 14px;
	--tfms-r: 0;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--tfms-h);
	min-height: var(--tfms-h);
	margin: 0;
	padding: 0 var(--tfms-px);
	background: var(--tfms-bg);
	color: var(--tfms-text);
	border: 1px solid var(--tfms-border);
	border-radius: var(--tfms-r);
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: var(--tfms-fs);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Tamanhos */
button.thefibra-member-save.thefibra-member-save--sm {
	--tfms-h: 40px;
	--tfms-fs: 11px;
	--tfms-px: 10px;
}

button.thefibra-member-save.thefibra-member-save--lg {
	--tfms-h: 52px;
	--tfms-fs: 13px;
	--tfms-px: 18px;
}

/* Cantos */
button.thefibra-member-save.thefibra-member-save--radius-rounded {
	--tfms-r: 8px;
}

button.thefibra-member-save.thefibra-member-save--radius-pill {
	--tfms-r: 999px;
}

/* Só ícone: botão quadrado/redondo; o texto continua disponível para leitores de ecrã. */
button.thefibra-member-save.thefibra-member-save--icon-only {
	padding: 0;
}

button.thefibra-member-save--icon-only .thefibra-member-save__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Estilo «preenchido» (por omissão) */
button.thefibra-member-save.thefibra-member-save--solid:hover,
button.thefibra-member-save.thefibra-member-save--solid:focus {
	background: var(--tfms-bg);
	color: var(--tfms-text);
	border-color: var(--tfms-text);
	text-decoration: none;
}

/* Estilo «contorno» */
button.thefibra-member-save.thefibra-member-save--outline,
button.thefibra-member-save.thefibra-member-save--outline:hover,
button.thefibra-member-save.thefibra-member-save--outline:focus {
	background: transparent;
	color: var(--tfms-accent);
	border-color: var(--tfms-accent);
	text-decoration: none;
}

button.thefibra-member-save.thefibra-member-save--outline:hover {
	box-shadow: inset 0 0 0 1px var(--tfms-accent);
}

/* Estilo «discreto» (sem moldura) */
button.thefibra-member-save.thefibra-member-save--ghost,
button.thefibra-member-save.thefibra-member-save--ghost:hover,
button.thefibra-member-save.thefibra-member-save--ghost:focus {
	background: transparent;
	color: var(--tfms-accent);
	border-color: transparent;
	text-decoration: none;
}

button.thefibra-member-save.thefibra-member-save--ghost:hover {
	background: rgba(127, 127, 127, 0.18);
}

/* Foco visível */
button.thefibra-member-save:focus-visible {
	outline: 3px solid var(--tfms-focus);
	outline-offset: 2px;
}

/* Estado «guardado» (vale para todos os estilos) */
button.thefibra-member-save[aria-pressed="true"],
button.thefibra-member-save[aria-pressed="true"]:hover,
button.thefibra-member-save[aria-pressed="true"]:focus {
	background: var(--tfms-on-bg);
	color: var(--tfms-on-text);
	/* Borda escura + anel claro: o botão «guardado» vê-se em páginas de fundo claro e escuro. */
	border-color: var(--tfms-bg);
	box-shadow: 0 0 0 1px var(--tfms-on-bg);
}

button.thefibra-member-save[aria-pressed="true"] .thefibra-member-save__icon path {
	fill: currentColor;
}

button.thefibra-member-save[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.thefibra-member-save__icon {
	flex: none;
}

/* «Só para membros»: escondido até o JavaScript confirmar a sessão. */
button.thefibra-member-save[hidden],
.thefibra-member-save-bar[hidden] {
	display: none;
}

.thefibra-member-save-bar--before {
	margin: 0 0 20px;
}

.thefibra-member-save-bar--after {
	margin: 20px 0 0;
}

/* Cartões de listagem: botão sobreposto. */
.thefibra-member-has-save {
	position: relative;
}

button.thefibra-member-save.thefibra-member-save--card {
	position: absolute;
	z-index: 5;
}

button.thefibra-member-save.thefibra-member-save--pos-top-right {
	top: 8px;
	right: 8px;
}

button.thefibra-member-save.thefibra-member-save--pos-top-left {
	top: 8px;
	left: 8px;
}

button.thefibra-member-save.thefibra-member-save--pos-bottom-right {
	right: 8px;
	bottom: 8px;
}

button.thefibra-member-save.thefibra-member-save--pos-bottom-left {
	bottom: 8px;
	left: 8px;
}

/* Cartões: só ao passar o rato (ou com foco do teclado). Ecrãs táteis: sempre visível.
   Notícias já guardadas mantêm o botão visível. */
@media (hover: hover) and (pointer: fine) {
	button.thefibra-member-save.thefibra-member-save--hover {
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.thefibra-member-has-save:hover button.thefibra-member-save--hover,
	.thefibra-member-has-save:focus-within button.thefibra-member-save--hover,
	button.thefibra-member-save.thefibra-member-save--hover[aria-pressed="true"],
	button.thefibra-member-save.thefibra-member-save--hover:focus-visible {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	button.thefibra-member-save.thefibra-member-save--hover {
		transition: none;
	}
}

/* Aviso. */
.thefibra-member-toast {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: 12px 16px;
	background: var(--tfms-bg);
	color: var(--tfms-text);
	border: 1px solid var(--tfms-border);
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	transform: translateX(-50%);
}

.thefibra-member-toast[hidden] {
	display: none;
}

/* Aviso desactivado pelo administrador: continua anunciado a leitores de ecrã, sem ser visível. */
.thefibra-member-toast.thefibra-member-toast--sr {
	position: absolute;
	left: -9999px;
	bottom: auto;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0, 0, 0, 0);
	transform: none;
}

.thefibra-member-toast a {
	color: var(--tfms-text);
	font-weight: 700;
	text-underline-offset: 3px;
}

.thefibra-member-toast a:focus-visible {
	outline: 3px solid var(--tfms-focus);
	outline-offset: 2px;
}

/* Janela de entrada (popup) ------------------------------------------- */
.thefibra-member-auth {
	--tfma-bg: #151517;
	--tfma-surface: #0b0b0c;
	--tfma-text: #f5f5f4;
	--tfma-muted: #a1a1aa;
	--tfma-line: #2e2e33;
	--tfma-field: #8a8a8a;
	--tfma-danger: #ffb0b0;
	--tfma-focus: #6ec1e4;
	box-sizing: border-box;
	width: min(440px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--tfma-line);
	border-radius: 22px;
	background: var(--tfma-bg);
	color: var(--tfma-text);
	font-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

.thefibra-member-auth--light {
	--tfma-bg: #ffffff;
	--tfma-surface: #f4f4f5;
	--tfma-text: #0e0e0e;
	--tfma-muted: #52525b;
	--tfma-line: #d4d4d8;
	--tfma-field: #71717a;
	--tfma-danger: #9b1111;
	--tfma-focus: #0b6a94;
}

.thefibra-member-auth *,
.thefibra-member-auth *::before,
.thefibra-member-auth *::after {
	box-sizing: border-box;
}

.thefibra-member-auth::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.thefibra-member-auth__inner {
	padding: 22px;
}

.thefibra-member-auth__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.thefibra-member-auth .thefibra-member-auth__title {
	margin: 0;
	color: var(--tfma-text);
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.thefibra-member-auth__subtitle {
	margin: 6px 0 0;
	color: var(--tfma-muted);
	font-size: 0.875rem;
}

.thefibra-member-auth .thefibra-member-auth__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -8px -8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tfma-text);
	cursor: pointer;
}

.thefibra-member-auth .thefibra-member-auth__close:hover {
	background: var(--tfma-surface);
}

.thefibra-member-auth__tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 18px;
	padding: 4px;
	border-radius: 999px;
	background: var(--tfma-surface);
}

.thefibra-member-auth .thefibra-member-auth__tabs button {
	flex: 1;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--tfma-muted);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.thefibra-member-auth .thefibra-member-auth__tabs button[aria-selected="true"] {
	background: var(--tfma-text);
	color: var(--tfma-bg);
}

.thefibra-member-auth__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.thefibra-member-auth__field label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.875rem;
	font-weight: 600;
}

.thefibra-member-auth .thefibra-member-auth__field input {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--tfma-field);
	border-radius: 12px;
	background: var(--tfma-surface);
	color: var(--tfma-text);
	font-family: inherit;
	font-size: 1rem;
	box-shadow: none;
}

.thefibra-member-auth .thefibra-member-auth__field input[aria-invalid="true"] {
	border-color: var(--tfma-danger);
}

.thefibra-member-auth__pwd {
	position: relative;
}

.thefibra-member-auth .thefibra-member-auth__pwd input {
	padding-right: 92px;
}

.thefibra-member-auth .thefibra-member-auth__toggle {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	min-width: 80px;
	padding: 0 12px;
	border: 0;
	border-left: 1px solid var(--tfma-line);
	border-radius: 0 11px 11px 0;
	background: transparent;
	color: var(--tfma-text);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.thefibra-member-auth__hint {
	margin: 6px 0 0;
	color: var(--tfma-muted);
	font-size: 0.8125rem;
}

.thefibra-member-auth__check {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	align-items: start;
	font-size: 0.875rem;
}

.thefibra-member-auth__check input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--tfma-text);
}

.thefibra-member-auth__check label a,
.thefibra-member-auth__check label a:visited,
.thefibra-member-auth .thefibra-member-auth__link,
.thefibra-member-auth .thefibra-member-auth__link:visited {
	color: var(--tfma-text);
	text-decoration: underline;
}

.thefibra-member-auth__check .thefibra-member-auth__error {
	grid-column: 2;
}

.thefibra-member-auth__error,
.thefibra-member-auth__alert {
	margin: 6px 0 0;
	color: var(--tfma-danger);
	font-size: 0.8125rem;
	font-weight: 600;
}

.thefibra-member-auth__alert {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--tfma-danger);
	border-radius: 12px;
}

.thefibra-member-auth__notice,
.thefibra-member-auth__lede {
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--tfma-surface);
	color: var(--tfma-text);
}

.thefibra-member-auth .thefibra-member-auth__submit {
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--tfma-text);
	border-radius: 999px;
	background: var(--tfma-text);
	color: var(--tfma-bg);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.thefibra-member-auth .thefibra-member-auth__submit[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.thefibra-member-auth .thefibra-member-auth__link {
	align-self: center;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	font-size: 0.875rem;
}

.thefibra-member-auth__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.thefibra-member-auth :focus-visible {
	outline: 2px solid var(--tfma-focus);
	outline-offset: 2px;
}

.thefibra-member-auth button {
	transition: none;
}
