/**
 * Estilo Fiel às Referências - Salesforce Member Access.
 * Fundo Azul Cobalto com Ondas Decorativas e Cards Modernos de Canto Arredondado 32px.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
	--sf-primary-blue: #154ab8;
	--sf-orange: #f28f00;
	--sf-orange-hover: #d98000;
	--sf-card-radius: 32px;
	--sf-input-radius: 10px;
	--sf-input-border: #6c89a9;
	--sf-text-dark: #000000;
	--sf-text-muted: #4e5e6f;
	--sf-font: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sf-transition: all 0.25s ease-in-out;
}

/* Container de Fundo Azul Cobalto */
.sf-member-wrapper {
	font-family: var(--sf-font);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 20px;
	background-color: var(--sf-primary-blue);
	min-height: 100vh; /* Altura mínima de 100% da altura do viewport */
	width: 100vw;      /* Largura total do viewport */
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
	box-sizing: border-box;
}

/* Formas Orgânicas de Fundo (Conforme mockup) */
.sf-bg-shape {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}

/* Onda do lado esquerdo */
.sf-shape-1 {
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0) 100%);
	left: -400px;
	top: 10%;
}

/* Onda ondulada do lado direito */
.sf-shape-2 {
	width: 800px;
	height: 1000px;
	background: rgba(255, 255, 255, 0.04);
	right: -300px;
	top: -200px;
	border-radius: 43% 57% 50% 50% / 40% 40% 60% 60%;
}

/* Círculo concêntrico central leve */
.sf-shape-3 {
	width: 1200px;
	height: 1200px;
	border: 80px solid rgba(255, 255, 255, 0.015);
	left: -200px;
	bottom: -400px;
}

/* Card Principal Branco */
.sf-member-card {
	background: #ffffff;
	border: 1.5px solid #000000;
	border-radius: var(--sf-card-radius);
	padding: 50px 45px;
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
	z-index: 2;
	position: relative;
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 1;
	transform: translateY(0);
}

.sf-member-card.sf-hidden {
	opacity: 0 !important;
	transform: translateY(20px) !important;
	pointer-events: none;
}

/* Logo SVG */
.sf-member-logo-container {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

.sf-member-logo-img {
	width: 170px;
	height: auto;
	max-height: 85px;
	filter: brightness(0); /* Converte a logo branca em preta para contraste no card branco */
	display: block;
}

/* Cabeçalho do Form */
.sf-member-header {
	text-align: left;
	margin-bottom: 25px;
}

.sf-member-title {
	color: var(--sf-text-dark);
	font-family: var(--sf-font);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 10px 0;
	letter-spacing: -0.5px;
}

.sf-member-subtitle {
	color: var(--sf-text-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	font-weight: 400;
}

/* Grupos de Input */
.sf-member-group {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.sf-member-group label {
	color: var(--sf-text-dark);
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
}

.sf-member-group input[type="text"],
.sf-member-group input[type="email"],
.sf-member-group input[type="tel"],
.sf-member-group select {
	background-color: #ffffff;
	border: 1px solid var(--sf-input-border);
	border-radius: var(--sf-input-radius);
	color: var(--sf-text-dark);
	font-size: 14px;
	padding: 12px 14px;
	transition: var(--sf-transition);
	width: 100%;
	box-sizing: border-box;
	outline: none;
	font-family: var(--sf-font);
}

.sf-member-group input:focus,
.sf-member-group select:focus {
	border-color: var(--sf-primary-blue);
	box-shadow: 0 0 0 3px rgba(21, 74, 184, 0.15);
}

.sf-member-group input::placeholder {
	color: #9cb1c9;
}

/* E-mail Leitura Exclusiva */
.sf-member-readonly-display {
	background-color: #f3f6fa;
	border: 1px solid var(--sf-input-border);
	border-radius: var(--sf-input-radius);
	color: #6a7b8c;
	font-size: 14px;
	padding: 12px 14px;
	font-weight: 500;
	min-height: 43px;
	box-sizing: border-box;
}

/* Duas Colunas (Cidade / Estado) */
.sf-member-row {
	display: flex;
	gap: 16px;
}

.sf-member-col {
	flex: 1;
	min-width: 0;
}

/* Wrapper Customizado do Dropdown */
.sf-member-select-wrapper {
	position: relative;
	width: 100%;
}

.sf-member-select-wrapper select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
}

/* Chevron personalizado conforme mockup */
.sf-member-select-wrapper::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	pointer-events: none;
}

/* Checkbox de Consentimento */
.sf-member-checkbox-group {
	margin: 20px 0;
}

.sf-member-checkbox-label {
	display: flex;
	align-items: flex-start;
	cursor: pointer;
}

.sf-member-checkbox-label input[type="checkbox"] {
	margin-top: 3px;
	margin-right: 10px;
	accent-color: var(--sf-primary-blue);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.sf-member-checkbox-label .checkbox-text {
	color: var(--sf-text-muted);
	font-size: 13px;
	line-height: 1.4;
	user-select: none;
}

/* Mensagens de Feedback */
.sf-member-feedback {
	border-radius: 8px;
	font-size: 13px;
	margin-bottom: 20px;
	padding: 10px 14px;
	display: none;
}

.sf-member-feedback.error {
	background-color: #fdf2f2;
	border: 1px solid #f8b4b4;
	color: #9b1c1c;
	display: block;
}

.sf-member-feedback.success {
	background-color: #f3faf7;
	border: 1px solid #def7ec;
	color: #03543f;
	display: block;
}

/* Botão Laranja Vibrante */
.sf-member-btn {
	background-color: var(--sf-orange);
	border: none;
	border-radius: var(--sf-input-radius);
	color: #ffffff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 20px;
	text-align: center;
	transition: var(--sf-transition);
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	box-shadow: none;
	font-family: var(--sf-font);
}

.sf-member-btn:hover {
	background-color: var(--sf-orange-hover);
}

/* Spinner de loading */
.sf-member-btn .sf-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: #ffffff;
	animation: sfSpin 0.8s linear infinite;
}

.sf-member-btn.loading {
	pointer-events: none;
	opacity: 0.8;
}

.sf-member-btn.loading .sf-spinner {
	display: block;
}

/* Links adicionais */
.sf-member-footer-links {
	text-align: center;
	margin-top: 20px;
}

.sf-member-link {
	color: var(--sf-primary-blue);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.sf-member-link:hover {
	text-decoration: underline;
}

/* Animações */
@keyframes sfSpin {
	to { transform: rotate(360deg); }
}

/* Responsividade */
@media (max-width: 576px) {
	.sf-member-card {
		padding: 35px 25px;
	}
	
	.sf-member-row {
		flex-direction: column;
		gap: 0;
	}
	
	.sf-member-title {
		font-size: 24px;
	}
}