/* Área de Membros fooba.studio — Modal de Autenticação */

/* ── Overlay ──────────────────────────────────────────────────── */
body.amf-modal-open { overflow: hidden; }

/* CRÍTICO: [hidden] tem especificidade menor que display:flex abaixo.
   Esta regra garante que o overlay comece oculto e só apareça quando
   AMFAuthModal.open() remover o atributo hidden. */
.amf-auth-overlay[hidden] { display: none !important; }

.amf-auth-overlay {
	position:       fixed;
	inset:          0;
	background:     rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index:        99999;
	display:        flex;
	align-items:    center;
	justify-content: center;
	padding:        16px;
	box-sizing:     border-box;
	animation:      amf-overlay-in 0.2s ease;
}

@keyframes amf-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ── Card do modal ────────────────────────────────────────────── */
.amf-auth-modal {
	position:      relative;
	background:    #fff;
	border-radius: 14px;
	box-shadow:    0 20px 60px rgba(0, 0, 0, 0.25);
	width:         100%;
	max-width:     420px;
	max-height:    90vh;
	overflow-y:    auto;
	animation:     amf-modal-in 0.22s ease;
}

@keyframes amf-modal-in {
	from { opacity: 0; transform: translateY(-12px) scale(.97); }
	to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

/* ── Botão fechar ────────────────────────────────────────────── */
.amf-auth-modal-close {
	position:   absolute;
	top:        12px;
	right:      12px;
	width:      32px;
	height:     32px;
	border:     none;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 50%;
	display:    flex;
	align-items: center;
	justify-content: center;
	cursor:     pointer;
	color:      #444;
	font-size:  15px;
	transition: background 0.15s;
	z-index:    1;
}

.amf-auth-modal-close:hover { background: rgba(0, 0, 0, 0.12); }

/* ── Header com ícone + mensagem contextual ───────────────────── */
.amf-auth-modal-header {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	padding:         28px 24px 16px;
	border-bottom:   1px solid #f0f0f0;
}

.amf-auth-modal-icon {
	font-size:     32px;
	color:         #1d2327;
	margin-bottom: 8px;
	line-height:   1;
}

.amf-auth-modal-title {
	font-size:    15px;
	font-weight:  600;
	color:        #1d2327;
	margin:       0;
	line-height:  1.4;
}

/* ── Body ─────────────────────────────────────────────────────── */
.amf-auth-modal-body {
	padding: 20px 24px 24px;
}

/* ── Abas login/cadastro ──────────────────────────────────────── */
.amf-auth-tabs {
	display:       flex;
	border-bottom: 2px solid #e8e8e8;
	margin-bottom: 20px;
}

.amf-auth-tab {
	flex:          1;
	padding:       10px 0;
	border:        none;
	background:    transparent;
	font-size:     14px;
	font-weight:   600;
	color:         #888;
	cursor:        pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition:    all 0.15s;
	font-family:   inherit;
}

.amf-auth-tab.is-active {
	color:        #1d2327;
	border-bottom-color: #1d2327;
}

/* ── Formulário ───────────────────────────────────────────────── */
.amf-auth-form { margin: 0; }

.amf-auth-field {
	margin-bottom: 14px;
}

.amf-auth-field label {
	display:       block;
	font-size:     12px;
	font-weight:   600;
	color:         #555;
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.amf-auth-field-input {
	width:         100%;
	padding:       10px 12px;
	border:        1px solid #d0d0d5;
	border-radius: 8px;
	font-size:     14px;
	color:         #1d2327;
	background:    #fff;
	box-sizing:    border-box;
	transition:    border-color 0.15s, box-shadow 0.15s;
	font-family:   inherit;
}

.amf-auth-field-input:focus {
	outline:    none;
	border-color: #1d2327;
	box-shadow: 0 0 0 3px rgba(29, 35, 39, 0.08);
}

/* Feedback de disponibilidade */
.amf-avail-feedback {
	display:    block;
	font-size:  11px;
	margin-top: 4px;
	min-height: 14px;
}

.amf-avail-feedback.is-ok      { color: #2e7d32; }
.amf-avail-feedback.is-error   { color: #c62828; }
.amf-avail-feedback.is-checking { color: #888; }

/* ── Botão submit ─────────────────────────────────────────────── */
.amf-auth-submit {
	width:         100%;
	padding:       12px 16px;
	margin-top:    6px;
	border:        none;
	border-radius: 8px;
	background:    #1d2327;
	color:         #fff;
	font-size:     15px;
	font-weight:   700;
	cursor:        pointer;
	transition:    opacity 0.15s;
	font-family:   inherit;
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	gap:           6px;
}

.amf-auth-submit:hover    { opacity: 0.88; }
.amf-auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Botão voltar ─────────────────────────────────────────────── */
.amf-auth-back-btn {
	background:  none;
	border:      none;
	color:       #2271b1;
	font-size:   13px;
	cursor:      pointer;
	padding:     0;
	display:     inline-flex;
	align-items: center;
	gap:         4px;
	font-family: inherit;
	margin-bottom: 4px;
}

.amf-auth-back-btn:hover { text-decoration: underline; }

/* ── Erro inline ──────────────────────────────────────────────── */
.amf-auth-error {
	background:    #fdecea;
	border:        1px solid #f5c2bf;
	color:         #842029;
	padding:       9px 12px;
	border-radius: 6px;
	font-size:     13px;
	margin-bottom: 14px;
}

/* ── Separador "ou" ───────────────────────────────────────────── */
.amf-auth-separator {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin:      16px 0;
	color:       #aaa;
	font-size:   12px;
}

.amf-auth-separator::before,
.amf-auth-separator::after {
	content:    '';
	flex:       1;
	height:     1px;
	background: #e8e8e8;
}

/* ── Botão Google ─────────────────────────────────────────────── */
.amf-auth-google-btn {
	display:       flex;
	align-items:   center;
	justify-content: center;
	gap:           10px;
	width:         100%;
	padding:       11px 16px;
	border:        1px solid #dadce0;
	border-radius: 8px;
	background:    #fff;
	color:         #3c4043;
	font-size:     14px;
	font-weight:   500;
	text-decoration: none;
	box-sizing:    border-box;
	transition:    background 0.15s, box-shadow 0.15s;
}

.amf-auth-google-btn:hover {
	background: #f8f9fa;
	box-shadow: 0 1px 4px rgba(60, 64, 67, 0.15);
	color:      #3c4043;
}

/* ── Termos ───────────────────────────────────────────────────── */
.amf-auth-termos label {
	display:     inline;
	align-items: flex-start;
	gap:         8px;
	font-size:   12px;
	font-weight: normal;
	text-transform: none;
	letter-spacing: 0;
	color:       #555;
	cursor:      pointer;
}

.amf-auth-termos label input[type="checkbox"] {
	width:          14px;
	height:         14px;
	flex-shrink:    0;
	margin-top:     0;
	vertical-align: middle;
	cursor:         pointer;
}

/* ── Honeypot oculto ──────────────────────────────────────────── */
.amf-auth-honeypot {
	position:   absolute;
	left:       -9999px;
	visibility: hidden;
}

/* ── Confirmação de código ────────────────────────────────────── */
.amf-auth-confirm-info {
	text-align:    center;
	padding:       8px 0 16px;
}

.amf-auth-confirm-icon {
	font-size:     40px;
	color:         #2e7d32;
	display:       block;
	margin-bottom: 12px;
}

.amf-auth-confirm-msg {
	font-size:   14px;
	color:       #555;
	line-height: 1.5;
}

.amf-auth-code-input {
	text-align:    center;
	letter-spacing: 0.4em;
	font-size:     22px !important;
	font-weight:   700;
	display:       block;
	margin:        0 auto;
	max-width:     220px;
}

/* Container do campo de código — centralizado */
#amf-modal-confirm .amf-auth-field {
	text-align: center;
}

#amf-modal-confirm .amf-auth-field label {
	display:    block;
	text-align: center;
}

/* ── Sucesso ──────────────────────────────────────────────────── */
.amf-auth-success {
	text-align:  center;
	padding:     24px 0;
}

.amf-auth-success-icon {
	font-size:     48px;
	color:         #2e7d32;
	display:       block;
	margin-bottom: 14px;
}

.amf-auth-success p {
	font-size:  15px;
	color:      #555;
}

/* ── Turnstile centralizado no modal ─────────────────────────── */
.amf-auth-turnstile {
	display:         flex;
	justify-content: center;
	margin:          8px 0 12px;
}