/* My Account — Phase 3 */
.account-page-wrap { padding: var(--fp-space-10) 0 var(--fp-space-16); }

.account-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fp-space-8);
}

.account-nav {
	background: var(--fp-navy-900);
	color: var(--fp-white);
	border-radius: var(--fp-radius-lg);
	padding: var(--fp-space-6);
}

.account-nav__user { margin-bottom: var(--fp-space-6); padding-bottom: var(--fp-space-4); border-bottom: 1px solid rgba(255,255,255,0.1); }
.account-nav__greeting { font-weight: 600; margin-bottom: var(--fp-space-2); }
.account-nav__badge { display: inline-block; padding: 0.125rem 0.5rem; font-size: var(--fp-font-size-xs); font-weight: 600; border-radius: var(--fp-radius-sm); }
.account-nav__badge--verified { background: rgba(20,184,166,0.2); color: var(--fp-teal-400); }
.account-nav__badge--pending { background: rgba(212,168,83,0.2); color: var(--fp-gold-400); }

.account-nav__list { display: flex; flex-direction: column; gap: var(--fp-space-1); }
.account-nav__link {
	display: block;
	padding: var(--fp-space-3) var(--fp-space-4);
	font-size: var(--fp-font-size-sm);
	font-weight: 500;
	color: rgba(255,255,255,0.75);
	border-radius: var(--fp-radius-md);
	transition: background-color var(--fp-transition), color var(--fp-transition);
}

.account-nav__link:hover,
.account-nav__item.is-active .account-nav__link {
	background: rgba(255,255,255,0.08);
	color: var(--fp-white);
}

.account-content {
	background: var(--fp-white);
	border: 1px solid var(--fp-gray-200);
	border-radius: var(--fp-radius-lg);
	padding: var(--fp-space-8);
}

.account-dashboard__title,
.account-page__title {
	font-size: var(--fp-font-size-2xl);
	font-weight: 700;
	color: var(--fp-navy-900);
	margin-bottom: var(--fp-space-4);
}

.account-dashboard__intro { font-size: var(--fp-font-size-sm); color: var(--fp-gray-600); margin-bottom: var(--fp-space-8); }

.account-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--fp-space-4);
	margin-bottom: var(--fp-space-8);
}

.account-stat {
	text-align: center;
	padding: var(--fp-space-6);
	background: var(--fp-gray-50);
	border-radius: var(--fp-radius-lg);
}

.account-stat__number { display: block; font-size: var(--fp-font-size-2xl); font-weight: 700; color: var(--fp-teal-600); }
.account-stat__label { font-size: var(--fp-font-size-xs); color: var(--fp-gray-500); }

.account-dashboard__actions { display: flex; gap: var(--fp-space-3); flex-wrap: wrap; }

.account-orders { width: 100%; border-collapse: collapse; font-size: var(--fp-font-size-sm); }
.account-orders th,
.account-orders td { padding: var(--fp-space-3) var(--fp-space-4); text-align: left; border-bottom: 1px solid var(--fp-gray-200); }
.account-orders th { font-weight: 700; color: var(--fp-navy-900); background: var(--fp-gray-50); }

.order-status { padding: 0.125rem 0.5rem; font-size: var(--fp-font-size-xs); font-weight: 600; border-radius: var(--fp-radius-sm); }
.order-status--completed { background: rgba(34,197,94,0.1); color: #15803d; }
.order-status--processing { background: rgba(20,184,166,0.1); color: var(--fp-teal-600); }
.order-status--pending { background: rgba(212,168,83,0.15); color: var(--fp-gold-500); }

.account-form__field { margin-bottom: var(--fp-space-4); }
.account-form__field label { display: block; font-size: var(--fp-font-size-sm); font-weight: 600; margin-bottom: var(--fp-space-2); }
.account-form__field input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--fp-gray-300);
	border-radius: var(--fp-radius-md);
	font-family: inherit;
}

.account-form__fieldset {
	border: 1px solid var(--fp-gray-200);
	border-radius: var(--fp-radius-md);
	padding: var(--fp-space-4);
	margin: var(--fp-space-6) 0;
}

.account-form__fieldset legend { font-weight: 700; padding: 0 var(--fp-space-2); }

@media (min-width: 768px) {
	.account-layout { grid-template-columns: 260px 1fr; }
}

@media (max-width: 767px) {
	.account-orders { display: block; overflow-x: auto; }
}
