/* =====================================================================
   TwoZ — User Area (user-area.css)
   Área do cliente + autenticação. Depende dos tokens de theme.css
   (carregada logo em seguida no header.tpl).
   ===================================================================== */

/* ===== SIDEBAR DA CONTA (menu Bulma) ===== */
.menu {
	background: #fff;
	border: 1px solid var(--twoz-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: .75rem;
}

.menu-list a {
	border-radius: var(--radius-md);
	color: var(--twoz-text);
	border-left: 3px solid transparent;
	margin-bottom: 2px;
	transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
		border-color var(--dur-1) var(--ease);
}

.menu-list a:hover {
	background-color: var(--twoz-cream);
	color: var(--twoz-ink);
}

.menu-list a .icon {
	color: var(--twoz-muted);
	transition: color var(--dur-1) var(--ease);
}

.menu-list a:hover .icon,
.menu-list a.is-active .icon {
	color: var(--twoz-gold-deep);
}

.menu-list a.is-active {
	background-color: var(--twoz-cream-2);
	color: var(--twoz-ink);
	border-left-color: var(--twoz-gold);
}

/* Sair — destaque sutil de risco */
.menu-list li:last-child a:hover {
	background-color: var(--twoz-danger-bg);
	color: var(--twoz-danger);
}

.menu-list li:last-child a:hover .icon {
	color: var(--twoz-danger);
}

/* ===== AUTENTICAÇÃO ===== */
.auth-container {
	background: #fff;
	border: 1px solid var(--twoz-line);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	padding: 2.5rem;
}

.auth-header .title {
	font-family: var(--font-title);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Divisor "Ou entre com" */
.divider {
	display: flex;
	align-items: center;
	color: var(--twoz-muted);
	font-size: .7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .18em;
}

.divider::before,
.divider::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid var(--twoz-line-strong);
}

.divider-text {
	padding: 0 .75rem;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
	.auth-container {
		padding: 1.5rem;
	}
}

/* ===== PÁGINAS DA CONTA — títulos e cabeçalhos ===== */
.history h1,
.identity h1,
.addresses h1,
.address h1,
.order-detail h1,
.order-slip h1 {
	font-family: var(--font-title);
	font-weight: 500;
	color: var(--twoz-ink);
}

/* Bloco "Minha conta" — bem-vindo */
.my-account-welcome {
	font-family: var(--font-title);
	font-size: 2rem;
	font-weight: 500;
	color: var(--twoz-ink);
}