/* aSS World Member — frontend styles */

/* ── Variables ────────────────────────────────────────────────────────── */

:root {
	--awm-brand:        #1a1a1a;
	--awm-accent:       #b32d2e;
	--awm-accent-light: #f8ecec;
	--awm-success:      #2e7d32;
	--awm-info:         #0066a0;
	--awm-info-light:   #e8f4fb;
	--awm-border:       #e0e0e0;
	--awm-bg:           #fafafa;
	--awm-text-muted:   #646970;
	--awm-radius:       4px;
}

/* ── Base wrapper ────────────────────────────────────────────────────── */

.awm-profile,
.awm-directory {
	max-width: 680px;
	margin: 0 auto;
	font-size: 15px;
}

/* ── Profile header ──────────────────────────────────────────────────── */

.awm-profile__header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 0 12px;
	border-bottom: 2px solid var(--awm-border);
	margin-bottom: 24px;
}

.awm-avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.awm-avatar--small {
	border-radius: 50%;
}

.awm-profile__title {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.awm-profile__pseudonym {
	margin: 0;
	font-size: 1.4em;
	font-weight: 700;
}

/* ── Badges ──────────────────────────────────────────────────────────── */

.awm-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 20px;
	line-height: 1.6;
}

.awm-badge--active {
	background: #e6f4ea;
	color: var(--awm-success);
	border: 1px solid #a8d5b0;
}

.awm-badge--inactive {
	background: #f5f5f5;
	color: var(--awm-text-muted);
	border: 1px solid var(--awm-border);
}

/* ── Profile sections ────────────────────────────────────────────────── */

.awm-profile__section {
	padding: 20px 0;
	border-bottom: 1px solid var(--awm-border);
}

.awm-profile__section:last-of-type {
	border-bottom: none;
}

.awm-profile__section h3 {
	margin: 0 0 8px;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--awm-brand);
}

.awm-profile__description {
	margin: 0 0 12px;
	color: var(--awm-text-muted);
	font-size: 0.9em;
}

/* ── Definition list ─────────────────────────────────────────────────── */

.awm-dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 16px;
	margin: 0 0 10px;
}

.awm-dl dt {
	font-weight: 600;
	color: var(--awm-text-muted);
	font-size: 0.88em;
}

.awm-dl dd {
	margin: 0;
}

/* ── Field rows ──────────────────────────────────────────────────────── */

.awm-field-row {
	margin-bottom: 12px;
}

.awm-field-row label {
	display: block;
	font-size: 0.88em;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--awm-brand);
}

.awm-field-row input[type="text"],
.awm-field-row input[type="url"],
.awm-field-row input[type="email"] {
	width: 100%;
	max-width: 400px;
	padding: 6px 10px;
	border: 1px solid var(--awm-border);
	border-radius: var(--awm-radius);
	font-size: 0.95em;
	box-sizing: border-box;
}

.awm-field-row input:disabled {
	background: #f5f5f5;
	color: #aaa;
	cursor: not-allowed;
}

.awm-field-row--checkbox {
	margin-top: 4px;
}

.awm-field-group--inline {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.awm-field-group--inline .awm-field-row {
	flex: 1;
	min-width: 120px;
}

.awm-field-note {
	font-size: 0.82em;
	color: var(--awm-text-muted);
	margin: 4px 0 0;
}

.awm-profile__note {
	font-size: 0.85em;
	color: var(--awm-text-muted);
	margin: 8px 0 0;
}

/* ── Checkbox label ──────────────────────────────────────────────────── */

.awm-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9em;
	cursor: pointer;
}

.awm-checkbox-label input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	accent-color: var(--awm-accent);
}

/* ── Notices ─────────────────────────────────────────────────────────── */

.awm-notice {
	padding: 10px 14px;
	border-radius: var(--awm-radius);
	margin-bottom: 14px;
	font-size: 0.9em;
}

.awm-notice--warning {
	background: var(--awm-accent-light);
	border-left: 4px solid var(--awm-accent);
	color: #5c1010;
}

.awm-notice--info {
	background: var(--awm-info-light);
	border-left: 4px solid var(--awm-info);
	color: #003d5c;
}

.awm-notice--error {
	background: var(--awm-accent-light);
	border-left: 4px solid var(--awm-accent);
	color: var(--awm-accent);
}

/* ── Contact gate ────────────────────────────────────────────────────── */

.awm-contact-gate {
	margin-bottom: 14px;
}

.awm-contact-fields--locked {
	opacity: 0.45;
	pointer-events: none;
}

/* ── Upload step ─────────────────────────────────────────────────────── */

.awm-upload-step h4 {
	font-size: 0.95em;
	font-weight: 700;
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--awm-brand);
}

.awm-upload-checklist {
	margin: 0 0 14px 1.2em;
	padding: 0;
	font-size: 0.9em;
	color: var(--awm-text-muted);
}

.awm-upload-checklist li {
	margin-bottom: 4px;
}

/* ── Upload gate ─────────────────────────────────────────────────────── */

.awm-upload-gate {
	margin-bottom: 12px;
}

/* ── Social links list ───────────────────────────────────────────────── */

.awm-social-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.awm-social-link-row {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.awm-social-link-row .awm-social-platform {
	flex: 0 0 160px;
	min-width: 120px;
	max-width: 180px;
}

.awm-social-link-row .awm-social-url {
	flex: 1;
	min-width: 160px;
}

.awm-social-link-row .awm-social-label {
	flex: 0 0 140px;
	min-width: 100px;
	max-width: 160px;
}

.awm-social-link-row input {
	padding: 5px 8px;
	border: 1px solid var(--awm-border);
	border-radius: var(--awm-radius);
	font-size: 0.9em;
	box-sizing: border-box;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.awm-btn {
	display: inline-block;
	padding: 9px 20px;
	border-radius: var(--awm-radius);
	font-size: 0.95em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: opacity 0.15s;
}

.awm-btn--primary {
	background: var(--awm-brand);
	color: #fff;
}

.awm-btn--primary:hover {
	opacity: 0.85;
	color: #fff;
}

.awm-btn--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Save footer ─────────────────────────────────────────────────────── */

.awm-profile__footer {
	padding: 20px 0;
	display: flex;
	align-items: center;
	gap: 14px;
}

.awm-save-status {
	font-size: 0.9em;
}

.awm-save-status--success { color: var(--awm-success); }
.awm-save-status--error   { color: var(--awm-accent); }

/* ── Member directory ────────────────────────────────────────────────── */

.awm-directory__gate-notice {
	max-width: 100%;
}

.awm-directory__grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 16px;
	margin-top: 16px;
}

.awm-member-card {
	background: #fff;
	border: 1px solid var(--awm-border);
	border-radius: var(--awm-radius);
	padding: 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.awm-member-card--blurred {
	filter: blur(6px);
	user-select: none;
	pointer-events: none;
}

.awm-blurred {
	filter: blur(5px);
	user-select: none;
}

.awm-member-card__body {
	flex: 1;
	min-width: 0;
}

.awm-member-card__name {
	display: block;
	font-size: 1em;
	margin-bottom: 4px;
}

.awm-member-card__sizes {
	font-size: 0.85em;
	color: var(--awm-text-muted);
	margin: 4px 0;
}

.awm-member-card__gate {
	font-size: 0.85em;
	color: var(--awm-text-muted);
	margin: 4px 0 0;
}

.awm-member-card__social {
	list-style: none;
	padding: 0;
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.awm-member-card__social li {
	margin: 0;
}

.awm-social-link {
	display: inline-block;
	padding: 2px 8px;
	background: var(--awm-bg);
	border: 1px solid var(--awm-border);
	border-radius: 12px;
	font-size: 0.8em;
	text-decoration: none;
	color: var(--awm-info);
}

.awm-social-link:hover {
	background: var(--awm-info-light);
}

.awm-sku-link {
	color: var(--awm-info);
}

.awm-member-card__contact {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.awm-contact-item {
	font-size: 0.82em;
	color: var(--awm-text-muted);
}

.awm-contact-item a {
	color: var(--awm-info);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
	.awm-profile__header {
		flex-wrap: wrap;
	}

	.awm-social-link-row {
		flex-direction: column;
		align-items: stretch;
	}

	.awm-social-link-row .awm-social-platform,
	.awm-social-link-row .awm-social-url,
	.awm-social-link-row .awm-social-label {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.awm-profile__footer {
		flex-direction: column;
		align-items: flex-start;
	}
}