/* Custom Login & Register - estilos base do front-end
   Os valores configuráveis (cores, radius, fontes) são injetados como
   CSS inline com seletores diretos + !important pelo plugin PHP,
   garantindo que vençam qualquer regra do tema ativo.
*/

.clr-box {
	max-width: 420px;
	margin: 0 auto;
	padding: 28px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.06);
	box-sizing: border-box;
}

.clr-form {
	display: block;
}

.clr-field {
	margin-bottom: 18px;
}

.clr-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
}

.clr-req {
	color: #dc2626;
}

/* Inputs — valores base; o CSS inline sobrescreve com !important */
.clr-field input[type="text"],
.clr-field input[type="email"],
.clr-field input[type="password"],
.clr-field input[type="tel"],
.clr-field input[type="number"],
.clr-field input[type="url"],
.clr-field input[type="date"],
.clr-field textarea {
	width: 100%;
	padding: 11px 12px;
	font-size: 15px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-sizing: border-box;
	background: #fff;
	color: #111827;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.clr-field input:focus,
.clr-field textarea:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.clr-field textarea {
	min-height: 90px;
	resize: vertical;
}

/* Campo de senha com botão de olho */
.clr-input-wrap {
	position: relative;
}

.clr-input-wrap.clr-has-icon input,
.clr-input-wrap.clr-has-icon textarea {
	padding-left: 40px !important;
}

.clr-field-icon {
	position: absolute;
	top: 50%;
	left: 14px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	color: var( --clr-icon-color, #9ca3af );
	stroke: currentColor;
	pointer-events: none;
	z-index: 1;
}

/* Em textareas o ícone fica alinhado ao topo, não centralizado. */
.clr-input-wrap.clr-icon-top .clr-field-icon {
	top: 14px;
	margin-top: 0;
}

.clr-input-wrap input {
	padding-right: 52px !important;
}

.clr-toggle-password {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	background: none;
	cursor: pointer;
	color: var( --clr-icon-color, #6b7280 );
	border-radius: 6px;
	/* Garante que o tema não sobreponha o botão de olho */
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	max-width: 32px !important;
	padding: 0 !important;
	transform: none !important;
}

.clr-toggle-password:hover,
.clr-toggle-password:focus,
.clr-toggle-password:focus-visible,
.clr-toggle-password:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.clr-toggle-password:hover {
	color: var( --clr-icon-color, #2563eb );
	background: rgba(0,0,0,0.05) !important;
	filter: none !important;
}

/* Os dois ícones ocupam exatamente a mesma posição (empilhados), centrados
   dentro do botão via position absolute + margin negativo. Isso garante
   que a troca de ícone (mostrar/ocultar) nunca desloca a posição vertical,
   independente de diferenças sutis entre os dois SVGs. */
.clr-toggle-password .clr-eye,
.clr-toggle-password .clr-eye-off {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	stroke: currentColor;
}

/* Regras da senha */
.clr-password-rules {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 12px;
}

.clr-password-rules li {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: #6b7280;
	margin: 0;
}

.clr-password-rules .clr-check {
	display: inline-flex;
	width: 16px;
	height: 16px;
	margin-right: 7px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	flex-shrink: 0;
	position: relative;
	transition: background 0.15s, border-color 0.15s;
}

.clr-password-rules li.clr-valid {
	color: #059669;
}

.clr-password-rules li.clr-valid .clr-check {
	background: #059669;
	border-color: #059669;
}

.clr-password-rules li.clr-valid .clr-check::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Feedback do e-mail */
.clr-email-feedback {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	min-height: 16px;
}

.clr-email-feedback.clr-ok    { color: #059669; }
.clr-email-feedback.clr-error { color: #dc2626; }

/* Lembrar de mim */
.clr-remember {
	display: flex;
	align-items: center;
}

.clr-remember label {
	display: inline-flex !important;
	align-items: center !important;
	font-weight: 400;
	font-size: 14px;
	color: #4b5563;
	cursor: pointer;
	gap: 8px;
	line-height: 16px;
}

.clr-remember label span {
	line-height: 16px;
	display: inline-block;
}

.clr-remember label input[type="checkbox"] {
	-webkit-appearance: checkbox !important;
	appearance: checkbox !important;
	box-sizing: border-box !important;
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	max-width: 16px !important;
	min-height: 16px !important;
	max-height: 16px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 3px !important;
	flex-shrink: 0;
	vertical-align: middle !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	float: none !important;
	transform: none !important;
	line-height: normal !important;
}

/* Botão — base; CSS inline (com !important) sempre vence */
.clr-box .clr-submit {
	display: block;
	width: 100%;
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #2563eb;
	border: 1px solid #2563eb;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	line-height: normal;
	transition: filter 0.15s;
	box-shadow: none;
}

.clr-box .clr-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	filter: none !important;
}

/* Mensagens */
.clr-message {
	display: none;
	padding: 11px 14px;
	margin-bottom: 16px;
	border-radius: 8px;
	font-size: 14px;
}

.clr-msg-error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

.clr-msg-success {
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #a7f3d0;
}

/* Rodapé / links */
.clr-form-footer {
	margin: 16px 0 0;
	text-align: center;
	font-size: 14px;
	color: #6b7280;
}

.clr-link {
	color: #2563eb;
	text-decoration: none;
}

.clr-link:hover {
	text-decoration: underline;
}

.clr-logged-in {
	text-align: center;
}

@media (max-width: 480px) {
	.clr-password-rules {
		grid-template-columns: 1fr;
	}
}

/* Captcha */
.clr-captcha-wrap {
	margin-bottom: 18px;
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Os widgets (hCaptcha, reCAPTCHA, Turnstile) desenham seu conteúdo dentro
   de um <iframe> com tamanho fixo definido pelo próprio provedor. Forçar
   width:100% no iframe distorce/corta esse conteúdo, então em vez disso
   limitamos a largura máxima e centralizamos o widget no card. Em telas
   estreitas o navegador permite rolagem horizontal apenas do widget. */
.clr-captcha-wrap > div,
.clr-captcha-wrap .h-captcha,
.clr-captcha-wrap .g-recaptcha,
.clr-captcha-wrap .cf-turnstile {
	max-width: 100%;
	height: auto;
	overflow-x: auto;
	overflow-y: hidden;
}

.clr-captcha-wrap iframe {
	max-width: 100%;
	display: block;
}

/* Login Social */
.clr-social-wrap {
	margin-top: 20px;
}

.clr-social-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 13px;
	color: #9ca3af;
}

.clr-social-divider::before,
.clr-social-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.clr-social-btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.clr-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: filter 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	cursor: pointer;
}

.clr-social-btn:hover {
	filter: brightness( 0.95 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.12 );
	text-decoration: none;
}

.clr-btn-google {
	background: #fff;
	color: #374151;
	border: 1px solid #d1d5db;
}

.clr-btn-facebook {
	background: #1877F2;
	color: #fff;
	border: 1px solid #1877F2;
}

/* Redefinir senha */
.clr-reset-intro {
	margin: 0 0 18px;
	font-size: 14px;
	color: #6b7280;
	line-height: 1.5;
}