/**
 * Signal Pack Global Components — My Account (frontend UI only)
 * Uses existing brand CSS variables with safe fallbacks (same pattern
 * as the other components in this plugin). Depends on buttons.css and
 * forms.css for shared field/button styling.
 */

.spgc-account-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 880px) { .spgc-account-layout { grid-template-columns: 1fr; } }

.spgc-account-menu {
	background: var(--grey-bg, #f6f6f9);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
}
.spgc-account-menu a {
	display: flex; align-items: center; gap: 10px;
	padding: 12px 14px; border-radius: 6px;
	font-size: 13.5px; font-weight: 600; color: var(--ink, #17162e);
	text-decoration: none;
	transition: background 0.15s ease;
}
.spgc-account-menu a:hover { background: var(--grey-alt, #eef0f5); }
.spgc-account-menu a.spgc-is-active { background: var(--navy, #2C2A78); color: #fff; }
.spgc-account-menu a.spgc-account-logout {
	color: #c8151f; margin-top: 8px; border-top: 1px solid var(--line, rgba(23, 22, 46, 0.10));
	border-radius: 0; padding-top: 16px;
}

.spgc-account-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .spgc-account-card-grid { grid-template-columns: 1fr; } }

.spgc-dashboard-card {
	background: var(--paper, #ffffff);
	border: 1px solid var(--line, rgba(23, 22, 46, 0.10));
	border-radius: 12px;
	padding: 22px;
}
.spgc-dashboard-card h4 { margin: 0 0 14px; font-size: 15.5px; }
.spgc-dashboard-card .spgc-dcard-row {
	display: flex; justify-content: space-between; gap: 10px;
	font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(23, 22, 46, 0.10));
}
.spgc-dashboard-card .spgc-dcard-row:last-of-type { border-bottom: none; }

.spgc-b2b-tag {
	font-size: 10px; text-transform: uppercase; font-weight: 700;
	background: var(--ink, #17162e); color: #fff; padding: 2px 7px; border-radius: 4px; margin-left: 6px;
}
.spgc-b2c-tag {
	font-size: 10px; text-transform: uppercase; font-weight: 700;
	border: 1px solid var(--navy, #2C2A78); color: var(--navy, #2C2A78); padding: 2px 7px; border-radius: 4px; margin-left: 6px;
}

/* Auth screens */
.spgc-auth-card {
	max-width: 420px; margin: 0 auto;
	background: var(--paper, #ffffff);
	border: 1px solid var(--line, rgba(23, 22, 46, 0.10));
	border-radius: 12px;
	padding: 36px;
}
.spgc-auth-card .spgc-eyebrow { display: block; margin-bottom: 8px; }
.spgc-auth-card h2 { font-size: 24px; margin: 0 0 8px; }
.spgc-auth-card .spgc-auth-sub { font-size: 13.5px; color: var(--grey-text, #55536b); margin: 0 0 24px; }
.spgc-auth-switch { text-align: center; font-size: 13px; color: var(--grey-text, #55536b); margin-top: 20px; }
.spgc-auth-success { text-align: center; padding: 20px 0; }
.spgc-auth-success .spgc-check-circle {
	width: 56px; height: 56px; border-radius: 50%;
	background: #e9f7ef; color: #1e8e5a;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 16px; font-size: 26px;
}