@import url('../libs/wa/styles/webawesome.css');

/* ---------- Fonte Roboto (variável, subconjunto latin) */
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/roboto/roboto-latin-wght-normal.woff2') format('woff2');
}

/* ---------- Fonte Ubuntu (subconjunto latin) -------- */
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ubuntu/ubuntu-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ubuntu/ubuntu-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/ubuntu/ubuntu-latin-700-normal.woff2') format('woff2');
}

[x-cloak] {
	display: none !important; 
}

/* ---------- View Transitions entre páginas ---------- */
@view-transition {
	navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 250ms;
	animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ---------- Tema Lua -------------------------------- */
@layer wa-theme-overrides {
	/* .wa-theme-lua { */
		/* Fontes disponíveis: 'Roboto' ou 'Ubuntu'. */
		/* --wa-font-family-body: 'Roboto', ui-sans-serif, system-ui, sans-serif; */
		/* --wa-font-family-body: 'Ubuntu', ui-sans-serif, system-ui, sans-serif; */
		/* --wa-font-family-heading: var(--wa-font-family-body); */
		/* --wa-font-weight-semibold: 500; */
		/* --wa-font-weight-bold: 700; */
	/* } */

	.wa-theme-lua {
		--wa-color-surface-border: var(--wa-color-neutral-80);
	}

	.wa-theme-lua.wa-dark, .wa-dark .wa-theme-lua {
		--wa-color-surface-border: var(--wa-color-neutral-30);
	}
}

/* ---------- Layout ---------------------------------- */
wa-page::part(header) {
	background-color: color-mix(in oklab, var(--wa-color-surface-default) 70%, transparent);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
wa-page > [slot='header'] {
	padding-block: var(--wa-space-xs);
}
wa-page[view='mobile'] .footer-nav {
	margin-inline: auto;
	justify-content: center;
}

/* ---------- Cards----------------------------------- */
wa-card[appearance='filled-outlined'] {
	background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet) 50%, var(--wa-color-surface-default));
}

/* ---------- Criar Conta ----------------------------- */
.account {
	inline-size: 100%;
	max-inline-size: 40rem;
	margin-inline: auto;
}
.account-types::part(form-control-label) {
	display: block;
	text-align: center;
	margin-block-end: var(--wa-space-m);
}
.account-types::part(form-control-input) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--wa-space-m);
}
.account-types wa-radio {
	margin: 0;
	padding: var(--wa-space-l);
	border: var(--wa-border-width-m) var(--wa-border-style) var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	cursor: pointer;
	transition: border-color var(--wa-transition-fast), background-color var(--wa-transition-fast);
}
.account-types wa-radio::part(control) {
	display: none;
}
.account-types wa-radio:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: var(--wa-focus-ring-offset);
}
.account-types wa-radio:hover {
	border-color: var(--wa-color-brand-border-loud);
}
.account-types wa-radio:state(checked) {
	border-color: var(--wa-color-brand-border-loud);
	background-color: var(--wa-color-brand-fill-quiet);
}
.password-strength {
	--track-height: 0.375rem;
}
.password-strength[data-level='1'] { --indicator-color: var(--wa-color-danger-fill-loud); }
.password-strength[data-level='2'] { --indicator-color: var(--wa-color-warning-fill-loud); }
.password-strength[data-level='3'] { --indicator-color: var(--wa-color-brand-fill-loud); }
.password-strength[data-level='4'] { --indicator-color: var(--wa-color-success-fill-loud); }
.text-upper::part(input),
.text-upper::part(textarea) {
	text-transform: uppercase;
}

/* ---------- Login ----------------------------------- */
.login {
	display: grid;
	inline-size: 100%;
	max-inline-size: 24rem;
	margin-inline: auto;
	border-radius: var(--wa-border-radius-l);
	overflow: hidden;
}
wa-page[view='desktop'] .login {
	grid-template-columns: 1fr 1fr;
	max-inline-size: 46rem;
}
.login-aside {
	justify-content: center;
	align-items: center;
	background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet) 50%, var(--wa-color-surface-default));
	border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.login-divider {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
}
.login-divider::before,
.login-divider::after {
	content: '';
	flex: 1;
	border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}
.login-mode::part(form-control-input) {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.login-mode wa-radio {
	justify-content: center;
}

/* ---------- Esqueci minha senha --------------------- */
.forgot-steps {
	font-size: var(--wa-font-size-xs);
	--gap: var(--wa-space-s);
}
.forgot-pin::part(segments) {
	justify-content: center;
}

/* ---------- Utilities ------------------------------- */
.pa-3xs{
	padding: var(--wa-space-3xs);
}
.pa-2xs{
	padding: var(--wa-space-2xs);
}
.pa-xs{
	padding: var(--wa-space-xs);
}
.pa-s{
	padding: var(--wa-space-s);
}
.pa-m{
	padding: var(--wa-space-m);
}
.pa-l{
	padding: var(--wa-space-l);
}
.px-m{
	padding-left: var(--wa-space-m);
	padding-right: var(--wa-space-m);
}
.py-xs{
	padding-top: var(--wa-space-xs);
	padding-bottom: var(--wa-space-xs);
}
.py-s{
	padding-top: var(--wa-space-s);
	padding-bottom: var(--wa-space-s);
}
.py-m{
	padding-top: var(--wa-space-m);
	padding-bottom: var(--wa-space-m);
}
.mt-s{
	margin-top: var(--wa-space-s);
}
.mt-m{
	margin-top: var(--wa-space-m);
}
.mt-l{
	margin-top: var(--wa-space-l);
}
.mt-xl{
	margin-top: var(--wa-space-xl);
}
.mt-2xl{
	margin-top: var(--wa-space-2xl);
}

@media (min-width: 64rem) {
	.lg-maxw-3-4{
		max-inline-size: 75%;
	}
}

.container{
	inline-size: 100%;
	max-inline-size: 70rem;
	margin-inline: auto;
}

.border{
	border-style: var(--wa-border-style);
	border-width: var(--wa-border-width-s);
	border-color: var(--wa-color-surface-border);
}