/* Member account page — [sbgc_account]. Mirrors design handoff README §7. */

:root {
	--danger: #C0492E;
	--danger-600: #A13D26;
	--shadow-sm: 0 2px 6px rgba(60, 34, 20, 0.10);
}

.sbgc-acct { width: 100%; }

/* Intro */
.sbgc-acct__intro {
	max-width: 1080px;
	margin: 0 auto;
	padding: 64px max(24px, 5vw) 8px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sbgc-acct__title { margin: 0; font: var(--type-display); color: var(--text-strong); }
.sbgc-acct__lead { margin: 0; font: var(--type-lead); color: var(--text-secondary); max-width: 52ch; }

/* Two-column body */
.sbgc-acct__grid {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px max(24px, 5vw) 24px;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 28px;
	align-items: start;
}

/* Cards */
.sbgc-acct__card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: 26px;
}
.sbgc-acct__profile {
	position: sticky;
	top: 98px;
	border-radius: var(--radius-2xl);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.sbgc-acct__forms { display: flex; flex-direction: column; gap: 24px; }

/* Log out link (profile card) */
.sbgc-acct__logout {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: none;
	padding: 9px 18px;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-pill);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sbgc-acct__logout:hover {
	color: var(--danger);
	border-color: var(--danger);
	background: rgba(192, 73, 46, 0.06);
}
.sbgc-acct__logout i { width: 16px; height: 16px; }

/* Avatar */
.sbgc-avatar {
	position: relative;
	width: 140px;
	height: 140px;
	cursor: pointer;
	display: block;
}
.sbgc-avatar__circle {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-pill);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	border: 1px solid var(--border-subtle);
	background: var(--clay-100);
	display: block;
}
.sbgc-avatar.is-dragover .sbgc-avatar__circle { outline: 2px dashed var(--clay-500); outline-offset: 2px; }
.sbgc-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbgc-avatar__initials {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	font: 700 44px/1 var(--font-display);
	color: var(--clay-600);
	background: var(--clay-100);
}
.sbgc-avatar__badge {
	position: absolute; bottom: 4px; right: 4px;
	width: 34px; height: 34px;
	border-radius: var(--radius-pill);
	background: var(--clay-500); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-sm);
	border: 2px solid var(--surface-card);
	pointer-events: none;
}
.sbgc-avatar__badge i { width: 17px; height: 17px; }

.sbgc-acct__hint { font: var(--type-caption); color: var(--text-muted); margin-top: 4px; }
.sbgc-acct__divider { height: 1px; width: 100%; background: var(--border-subtle); margin: 14px 0 4px; }
.sbgc-acct__name { font: 700 19px/1.2 var(--font-display); color: var(--text-strong); }
.sbgc-acct__handle { font: 500 13px/1 var(--font-mono); color: var(--text-muted); }
.sbgc-acct__badge { margin-top: 10px; }
.sbgc-acct__since { font: var(--type-caption); color: var(--text-muted); margin-top: 8px; }

/* Group headers */
.sbgc-acct__grouphd { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; }
.sbgc-acct__grouphd h2 { margin: 0; font: var(--type-h3); color: var(--text-strong); }
.sbgc-acct__grouphd span { font: var(--type-caption); color: var(--text-muted); }

/* Fields */
.sbgc-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.sbgc-field:last-child { margin-bottom: 0; }
.sbgc-field > label { font: 600 13px/1 var(--font-text); color: var(--text-body); }
.sbgc-field__control {
	display: flex; align-items: center; gap: 9px;
	height: 46px; padding: 0 14px;
	background: var(--surface-page, #fff);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sbgc-field__control:focus-within { border-color: var(--clay-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay-100) 70%, transparent); }
.sbgc-field__control i { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.sbgc-field__control input,
.sbgc-field__control select {
	border: 0; outline: 0; background: transparent;
	width: 100%; height: 100%;
	font: var(--type-body); color: var(--text-strong);
}
.sbgc-field__control--select { padding-right: 6px; }
.sbgc-field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.sbgc-field__row--3 { grid-template-columns: 2fr 1fr 1fr; }
.sbgc-field__row .sbgc-field { margin-bottom: 0; }

/* Save row */
.sbgc-acct__saverow { display: flex; align-items: center; gap: 16px; }
.sbgc-acct__saved { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--font-text); color: var(--forest-600); }
.sbgc-acct__saved i { width: 18px; height: 18px; }

/* Subscription */
.sbgc-acct__sub { max-width: 1080px; margin: 0 auto; padding: 20px max(24px, 5vw) 72px; }
.sbgc-acct__subtitle { margin: 8px 0 18px; font: var(--type-h1); color: var(--text-strong); }
.sbgc-acct__subcard {
	border-radius: var(--radius-2xl);
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
}
.sbgc-acct__subleft { display: flex; align-items: center; gap: 18px; }
.sbgc-acct__subicon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; flex: none;
	border-radius: var(--radius-md);
	background: var(--clay-100); color: var(--clay-600);
}
.sbgc-acct__subicon i { width: 26px; height: 26px; }
.sbgc-acct__subname { display: flex; align-items: center; gap: 10px; }
.sbgc-acct__subname > span:first-child { font: 700 19px/1.1 var(--font-display); color: var(--text-strong); }
.sbgc-acct__subprice { font: var(--type-body); color: var(--text-secondary); }
.sbgc-acct__price { font: 600 16px/1 var(--font-mono); color: var(--text-accent); }
.sbgc-acct__subactions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Cancel */
.sbgc-acct__cancelbtn,
.sbgc-acct__confirmcancel {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 18px;
	border-radius: var(--radius-md);
	font: 600 14px/1 var(--font-text);
	cursor: pointer;
}
.sbgc-acct__cancelbtn { border: 1px solid var(--danger); background: transparent; color: var(--danger); transition: background .15s ease, color .15s ease; }
.sbgc-acct__cancelbtn:hover { background: var(--danger); color: #fff; }
.sbgc-acct__cancelbtn:disabled { opacity: .5; cursor: default; }
.sbgc-acct__confirmcancel { border: 0; background: var(--danger); color: #fff; }
.sbgc-acct__confirmcancel:hover { background: var(--danger-600); }
.sbgc-acct__confirm {
	margin-top: 14px;
	background: var(--surface-raised);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: 18px 22px;
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
	font: var(--type-body); color: var(--text-body);
}
.sbgc-acct__confirm[hidden] { display: none; }
.sbgc-acct__confirmbtns { display: flex; gap: 10px; margin: 0; }

/* Badges (tones used here) */
.badge--clay { background: var(--clay-100); color: var(--clay-700, var(--clay-600)); }
.badge--success { background: var(--forest-100, #E3EDE6); color: var(--forest-600); }

/* Responsive */
@media (max-width: 860px) {
	.sbgc-acct__grid { grid-template-columns: 1fr; }
	.sbgc-acct__profile { position: static; }
	.sbgc-field__row, .sbgc-field__row--3 { grid-template-columns: 1fr; }
	.sbgc-acct__subcard { flex-direction: column; align-items: flex-start; }
}