/* == Profile Page == */

/* Prevent long emails from breaking layout */
.email-display { word-break: break-all; }

.name {
	margin: 0 var(--space-3) 0;
}


/* Centered upload button */
.photos-upload-centered {
	display: flex;
	justify-content: center;
	padding: var(--padding-base);
	margin-bottom: var(--margin-base);
	background: var(--card-bg);
	border-radius: var(--card-radius);
	border: 1px solid var(--border);
}

.photos-upload-centered .btn-primary {
	padding: var(--space-3) var(--space-8);
	font-size: var(--text-base);
}

.photos-max-message {
	color: var(--muted);
	font-size: var(--text-sm);
	text-align: center;
	margin: 0;
}

.photos-count {
	font-size: var(--text-sm);
	color: var(--muted);
}



/* Status badges for photos in gallery/list */
.media-status-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	z-index: 10;
	white-space:nowrap; 
}

.media-status-badge.pending {
	background: rgba(245, 158, 11, 0.95);
	color: white;
}

.media-status-badge.rejected {
	background: rgba(239, 68, 68, 0.95);
	color: white;
}

.media-status-badge.primary {
	position: absolute;
	top: 7px;
	font-size:var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: 0.25em;
	z-index:12;
	padding: 1px 10px;
	background: var(--primary);
	color: var(--button-text);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Status message for pending/rejected photos */
.photo-status-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	padding: var(--space-4);
}

.photo-status-message .status-info {
	color: var(--muted);
	font-size: var(--text-sm);
	font-style: italic;
	margin: 0;
}

.photo-status-message .status-title {
	color: var(--error);
	font-weight: 600;
	font-size: var(--text-sm);
	margin: 0 0 0.5rem 0;
}

.photo-status-message .status-reason {
	color: var(--muted);
	font-size: var(--text-sm);
	margin: 0;
}

/* Photo empty state with avatar background */
.photo-empty-with-avatar {
	max-width: 400px;
	margin: var(--space-4) auto;
	padding: var(--space-8) var(--space-6);
	background-color: var(--surface);
	background-repeat: no-repeat;
	border: 2px dashed var(--border);
	border-radius: var(--radius-xl);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s;
		background-size: cover;
		background-position: bottom;
}

.photo-empty-with-avatar[data-gender="male"] {
	background-image: url(/assets/shared/avatars/default-male.png);
}
.photo-empty-with-avatar[data-gender="female"] {
	background-image: url(/assets/shared/avatars/default-female.png);
}

.photo-empty-with-avatar:hover {
	border-color: var(--primary);
	background-color: var(--accent);
}

.photo-empty-with-avatar h3 {
	margin-top: 50px;
}
.photo-empty-with-avatar .locked-coins-hint {
	width:fit-content;
	display:block;
	margin:var(--margin-base) auto;
	padding:var(--space-2) var(--space-6);
}

.photo-benefits-list {
	list-style: none;
	padding: 0;
	margin: var(--space-4) 0;
	text-align: left;
	max-width: 280px;
	margin-left: auto;
	margin-right: auto;
}

.photo-benefits-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: var(--space-2);
	color: var(--muted);
	font-size: var(--text-sm);
}

.photo-benefits-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--success);
	font-weight: 600;
}

/* == VIP Badge (Reusable gold gradient badge) == */

.vip-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 6px;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--vip-button-text) !important;
	background: linear-gradient(135deg, var(--vip-gold-light) 0%, var(--vip-gold) 50%, var(--vip-gold-dark) 100%);
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	margin-left: var(--space-1);
	vertical-align: middle;
}

/* Profile Settings Section */
.panels {
	margin-top: var(--space-4);
}

.panels .panel:first-child {
	margin-top: 0;
}

.panels .card strong {
	font-weight: 400;
}

.panels .card .message-toggle button
{
	margin-right:var(--space-1);
}
.panels .card .message-toggle
{
	display: inline-block;
}


.panel {
	background: var(--card-bg);
	border-radius: var(--radius-lg);
	padding: var(--space-2) var(--space-6);
	margin-bottom: var(--space-6);
}

.panel.ui-section {
	background: none;
	padding:0;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--gap-base);
}

@media (min-width: 768px) {
	.panel.ui-section { 
		grid-template-columns: repeat(2, 1fr);
	}
}
.passkey-icon-active { color: #16a34a; }

.panel h2 {
	font-size: var(--text-lg);
	font-weight: 600;
	margin: 0 0 1rem;
}



.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
}

.stat-value {
	font-size: var(--text-2xl);
	font-weight: 600;
	color: var(--foreground);
}

.stat-label {
	font-size: var(--text-xs);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Edit fields grid - 3 columns on desktop */
#edit-profile .account {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
	#edit-profile .account {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--gap-base);
	}
}

#edit-profile .account .profile-field-card {
	margin-bottom: 0;
}

/* ----- profile and member page css */
/* Profile Main Layout - 3 columns on desktop: Photo | CTA boxes | Profile info */
.layout {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
}

.col-photo {
	width: 100%;
}

.col-photo .hero {
	aspect-ratio: 4/5;
}

.col-info {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
	min-width: 0;
	overflow: hidden;
}

.status {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gap-base);
	width: 100%;
}
.status ARTICLE{
	flex:1;
	display: flex;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--card-radius);
	font-size:var(--text-sm);
}


@media (max-width: 768px) {
	.status-boxes {
		flex-direction: column;
	}
}


@media (min-width: 992px) {
	.layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.col-photo,
	.layout .status-boxes,
	.col-info {
		flex: 1;
		min-width: 0;
	}

	.col-photo .hero {
		max-height: none;
	}
}

/* Full-width profile photo */
.hero {
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	aspect-ratio: 4/5;
	border-radius: var(--profile-radius);
	overflow: hidden;
	background: var(--accent);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
	border: 3px solid var(--avatar-border-color);
}

/* Verified profile - blue border and shadow */
.hero.verified {
	border: 1px solid var(--member-verified-bg);
	box-shadow: 0 0 15px color-mix(in srgb, var(--member-verified-bg) 50%, transparent);
}

/* No photo state */
.hero.no-photo {
	border: 2px dashed var(--border);
	transition: border-color 0.2s, background 0.2s;
}

.photo-upload-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gap-base);
	padding: var(--space-8);
	text-align: center;
	max-width: 320px;
}

/* Persuasive heading */
.photo-upload-prompt h3 {
	margin: 0;
}

/* Persuasive message below heading */
.photo-prompt-message {
	font-size: var(--text-sm);
	color: var(--muted);
	line-height: var(--line-height-normal);
	margin: 0;
}

.photo-upload-prompt svg {
	width: 64px;
	height: 64px;
	color: var(--primary);
}

.photo-prompt-link {
	font-size: var(--text-lg);
	font-weight: 600;
	transition: opacity 0.2s;
}


.hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Account fields (edit profile) */
#edit-profile .account article {
	background: var(--card-bg);
	border-radius: var(--card-radius);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
}

#edit-profile .account article header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-1\.5);
}

#edit-profile .account article h3 {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin: 0;
}

#edit-profile .account article header div {
	display: flex;
	gap: var(--space-2);
}

#edit-profile .account article p {
	font-size: var(--text-sm);
	line-height: var(--line-height-normal);
	margin: 0;
}

#edit-profile .account article .empty {
	color: var(--muted);
	font-style: italic;
	font-size: var(--text-sm);
}

#edit-profile .account article input,
#edit-profile .account article select {
	width: 100%;
	padding: var(--space-2) var(--space-2\.5);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	background-color: var(--input-bg);
	color: var(--foreground);
	font-size: var(--text-sm);
	resize: none;
}

#edit-profile .account article input::placeholder {
	color: var(--muted);
	font-style: italic;
	font-size: var(--text-sm);
}

#edit-profile .account .date-picker {
	display: flex;
	gap: var(--space-2);
}

#edit-profile .account .date-picker select {
	flex: 1;
	min-width: 0;
}

#edit-profile .account .radios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

#edit-profile .account .radios label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
	font-size: var(--text-sm);
}

#edit-profile .account .radios input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--primary);
	cursor: pointer;
}

#edit-profile .account .location .fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

#edit-profile .account .location .fields > div {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

/* Legacy field-card (tagline/about in profile view) */
.field-card {
	background: var(--card-bg);
	border-radius: var(--card-radius);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
}

.field-card-empty {
	background-color: var(--card-bg);
	border: 2px dashed var(--error);
}

.field-card-empty .field-empty {
	display: block;
	text-align: center;
	padding: var(--space-4) var(--space-2);
	color: var(--error);
	font-weight: 500;
	cursor: pointer;
}

.field-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-1\.5);
}

.field-label {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.field-input {
	width: 100%;
	padding: var(--space-2) var(--space-2\.5);
	border: 1px solid var(--border);
	border-radius: var(--radius-xs);
	background-color: var(--input-bg);
	color: var(--foreground);
	font-size: var(--text-sm);
	resize: none;
}

.field-input::placeholder {
	color: var(--muted);
	font-style: italic;
	font-size: var(--text-sm);
}

.field-buttons {
	display: flex;
	gap: var(--space-2);
	padding-top: var(--space-2);
}

.field-value {
	font-size: var(--text-sm);
	line-height: var(--line-height-normal);
}

.field-empty {
	color: var(--muted);
	font-style: italic;
	font-size: var(--text-sm);
}

/* Profile Status Boxes Grid Container */
.status-boxes {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: var(--gap-base);
}

/* Status Box - Base styles */
.status-boxes ARTICLE {
	flex:1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--card-radius);
}
/* Status Box - Free Message */
.status-free-message {
	background: var(--cta-freemsg-bg);
	border: 1px solid var(--cta-freemsg-border);
}

.status-free-message .box-icon {
	color: var(--cta-freemsg);
}

.status-free-message.status-not-verified {
	background: linear-gradient(135deg, rgba(156, 163, 175, 0.12) 0%, transparent 100%);
	border-color: rgba(156, 163, 175, 0.25);
}

.status-free-message.status-not-verified .box-icon {
	color: var(--muted);
}

/* Status Box - Upgrade CTA */
.status-upgrade {
	background: var(--cta-upgrade-bg);
	border: 1px solid var(--cta-upgrade-border);
}
/* Status Box - Coins */
.status-coins {
	background: var(--cta-coins-bg);
	border: 1px solid var(--cta-coins-border);
}

/* Status Box - Invisible Mode (off state) */
.status-boost {
	background: var(--card-bg);
	border: 1px solid var(--border);
}
.status-boost.status-active {
	background: rgba(0, 128, 0, 0.2);
	border: 1px solid rgba(0, 255, 0, 0.1);
}

/* Status Box - Invisible Mode (off state) */
.status-invisible {
	background: var(--card-bg);
	border: 1px solid var(--border);
}

.status-invisible .box-icon {
	opacity: 0.5;
}

/* Status Box - Invisible Mode (on/active state) */
.status-invisible.status-active {
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
}

.status-invisible.status-active .box-icon {
	opacity: 1;
	color: var(--primary);
}

/* Status Box - Invisible Mode (VIP required - for free users) */
.status-invisible.status-vip-required {
	background: var(--card-bg);
	border: 1px solid var(--border);
}

.status-invisible.status-vip-required .box-icon {
	opacity: 0.4;
}

.status-invisible .vip-badge {
	font-size: var(--text-xs);
	background: var(--vip-gold);
	color: #000;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	margin-left: var(--space-2);
}


.status-pending {
    border:1px solid var(--success);
}

.box-icon {
	width: var(--icon-lg);
	height: var(--icon-lg);
}
.status-boxes h4 {
	gap: var(--space-1);
	font-weight: 400;
	line-height: 1.3;
	color: var(--foreground);
	text-transform: capitalize;
}

.status-boxes P {
	font-size: var(--text-sm);
}


/* Status Box - Premium */
.status-vip {
	background: linear-gradient(-15deg, color-mix(in srgb, var(--vip-gold) 65%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--vip-gold) 30%, transparent);
}

.status-vip .box-icon {
	color: var(--vip-gold);
}

/* Status Box - Free Member */
.status-free {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-free-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-free-bg) 30%, transparent);
}

.status-free .box-icon {
	color: var(--member-free-bg);
}

/* Status Box - New Member */
.status-new {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-new-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-new-bg) 30%, transparent);
}

.status-new .box-icon {
	color: var(--member-new-bg);
}

/* Status Box - Fresh Member (2-7 days) */
.status-fresh {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-fresh-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-fresh-bg) 30%, transparent);
}

.status-fresh .box-icon {
	color: var(--member-fresh-bg);
}

/* Status Box - Active Member (8-30 days) */
.status-active {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-active-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-active-bg) 30%, transparent);
}

.status-active .box-icon {
	color: var(--member-active-bg);
}

/* Status Box - Established Member (31-180 days) */
.status-established {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-established-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-established-bg) 30%, transparent);
}

.status-established .box-icon {
	color: var(--member-established-bg);
}

/* Status Box - Veteran Member (180+ days) */
.status-veteran {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-veteran-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-veteran-bg) 30%, transparent);
}

.status-veteran .box-icon {
	color: var(--member-veteran-bg);
}

/* Status Box - Verify (default/pending state) */
.status-verify {
	background: var(--cta-verify-bg);
	border: 1px solid var(--cta-verify-border);
}

.status-verify .box-icon {
	color: var(--cta-verify);
}

/* Status Box - Verified */
article.status-verified {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-verified-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-verified-bg) 30%, transparent);
}

.status-verified .box-icon {
	color: var(--member-verified-bg);
}

/* Status Box - Not Verified (warning state) */
.status-not-verified {
	background: linear-gradient(135deg, color-mix(in srgb, var(--member-not-verified-bg) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--member-not-verified-bg) 30%, transparent);
}

.status-not-verified .box-icon {
	color: var(--member-not-verified-bg);
}

/* Profile Stats Grid - 8 columns on desktop, 4 on tablet, 2 on mobile */
.stats-cards {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: var(--gap-base);
	margin-top: var(--space-4);
	margin-bottom: var(--margin-base);
}

.stats-cards ARTICLE {
	display: flex;
	flex-direction: column;
	padding: var(--space-2) var(--space-3);
	background: var(--card-stats-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	text-align: center;
}

.stats-cards ARTICLE h4 {
	display: block;
	font-size: var(--text-xs);
	margin-bottom: var(--space-1);
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 1024px) {
	.stats-cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 640px) {
	.stats-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* Profile Edit Section */
#edit-profile .panel {
	margin-top: var(--space-4);
}


#page-member .summary {
	margin:.5rem 0;
	font-size: 1.2rem;
}
#page-member .first-name {
	font-weight: 600;
}

/* Basic info card */
.basic-info {
	background: var(--card-bg);
	border-radius: var(--card-radius);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
}

.basic-info header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-1\.5);
}

.basic-info h3 {
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin: 0;
}

.basic-info p {
	font-size: var(--text-sm);
	margin: var(--space-1) 0;
}

.basic-info small {
	color: var(--muted);
	display: flex;
	align-items: center;
}

.basic-info .email {
	font-size: var(--text-xs);
	word-break: break-all;
}

/* Match Status Box - Gradient style like other status boxes */
.match-status-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gap-base);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--card-radius);
	background: var(--error-bg-subtle);
	border: 1px solid var(--error-border-subtle);
}

.match-status-box .match-emoji {
	flex-shrink: 0;
}

.match-status-box .match-emoji img {
	width: var(--icon-3xl);
	height: var(--icon-3xl);
}

.match-status-box h4 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-0\.5);
}

.match-status-box .match-title {
	font-size: var(--text-lg);
	font-weight: 600;
}

.match-status-box .match-subtitle {
	font-size: var(--text-sm);
	
	color: var(--muted);
}

.match-status-box h4 svg {
	color: var(--error);
	fill: #ef4444;
}


/* Conversation Preview Box */
.conversation-preview-box {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
	padding: var(--space-4) var(--space-4);
	border-radius: var(--card-radius);
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent) 0%, transparent 100%);
	border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
	text-decoration: none;
	color: var(--foreground);
	transition: background 0.2s, border-color 0.2s;
}

.conversation-preview-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: inherit;
}

.conversation-preview-header svg {
	color: var(--primary);
	flex-shrink: 0;
}

.conversation-preview-title {
	font-size: var(--text-sm);
	font-weight: 600;
}

.conversation-preview-time {
	font-size: var(--text-xs);
	color: var(--muted);
	margin-left: auto;
}

.conversation-preview-view {
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--primary);
	margin-left: var(--space-2);
}

.conversation-preview-unread {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.375rem;
	font-size: var(--text-xs);
	font-weight: 600;
	color: #fff;
	background: var(--primary);
	border-radius: var(--radius-lg);
	margin-left: var(--space-2);
}

.conversation-preview-message {
	font-size: var(--text-sm);
	color: var(--muted);
	font-style: italic;
	line-height: var(--line-height-tight);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.conversation-preview-cta {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--primary);
	background: none;
	border: 1px solid var(--primary);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	align-self: flex-start;
}

/* == Badge Chips - Compact badge display == */

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-lg);
	border: 1px solid;
	font-size: var(--text-xs);
	font-weight: 500;
	white-space: nowrap;
}

.chip[data-size="sm"] {
	padding: var(--space-0\.5) var(--space-1\.5);
	font-size: var(--text-2xs);
	border-radius: var(--radius-md);
	gap: var(--space-0\.5);
}

.chip[data-size="md"] {
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-xs);
}

.chip[data-size="lg"] {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	gap: var(--space-2);
}

.chip svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
}

.chip[data-size="sm"] svg {
	width: 10px;
	height: 10px;
}

.chip[data-size="lg"] svg {
	width: 14px;
	height: 14px;
}

.chip span { line-height: 1; }
.chip small { opacity: 0.7; font-size: 0.65em; }

/* Badge circle tier backgrounds */
.badges article[data-tier="platinum"] > div { background-image: url('/assets/badges/badge-gold.svg'); }
.badges article[data-tier="gold"] > div { background-image: url('/assets/badges/badge-gold.svg'); }
.badges article[data-tier="silver"] > div { background-image: url('/assets/badges/badge-silver.svg'); }
.badges article[data-tier="bronze"] > div { background-image: url('/assets/badges/badge-bronze.svg'); }
.badges article[data-tier="none"] > div { background-image: url('/assets/badges/badge-silver.svg'); }

/* == Badge Cards - Full card with icon == */

.badge-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3);
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.badge-card header {
	display: flex;
	align-items: center;
	gap: var(--gap-base);
}

.badge-card header > div:first-child {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	border: 2px solid;
	flex-shrink: 0;
}

.badge-card header > div:first-child svg {
	width: 18px;
	height: 18px;
}

.badge-card header > div:last-child {
	display: flex;
	flex-direction: column;
	gap: var(--space-0\.5);
	min-width: 0;
}

.badge-card strong {
	font-size: var(--text-xs);
	color: var(--muted);
	text-transform: capitalize;
	font-weight: normal;
}

.badge-card header span {
	font-size: var(--text-sm);
	font-weight: 600;
}

.badge-card p {
	font-size: var(--text-xs);
	color: var(--muted);
	margin-top: var(--space-1);
}

/* == Badges Showcase == */

.showcase {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* == Badge Row - stat-value icon == */

.stat-value svg {
	width: 14px;
	height: 14px;
	margin-right: var(--space-1);
	vertical-align: -2px;
	flex-shrink: 0;
}

/* == Badge Circle - Circular badge with SVG background == */

.badges article > div {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.15s ease;
	text-align: center;
}

.badges article[data-size="sm"] > div { width: 64px; height: 64px; }
.badges article[data-size="md"] > div { width: 83px; height: 83px; }
.badges article[data-size="lg"] > div { width: 101px; height: 101px; }

/* Icon inside badge */
.badges article svg {
	width: var(--icon-xl);
	height: var(--icon-xl);
	color: #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.badges article[data-size="sm"] svg { width: var(--icon-lg); height: var(--icon-lg); }
.badges article[data-size="lg"] svg { width: var(--icon-2xl); height: var(--icon-2xl); }

/* Value/label inside badge */
.badges article > div span {
	font-size: 0.7rem;
	font-weight: 400;
	color: #fff;
	text-shadow: var(--text-shadow-sm);
	margin-top: 2px;
	max-width: 64px;
	text-align: center;
	line-height: 1.1;
	word-wrap: break-word;
}

.badges article[data-size="sm"] > div span {
	font-size: 0.6rem;
	max-width: 44px;
}

/* Category label below badge */
.badges p {
	font-size: var(--text-xs);
	color: var(--muted);
	text-align: center;
	line-height: var(--line-height-tight);
	padding: var(--space-1) 0;
}

.badges article[data-size="sm"] p { font-size: var(--text-2xs); max-width: 64px; }
.badges article[data-size="lg"] p { font-size: var(--text-xs); max-width: 96px; }

/* Tier-specific icon colors */
.badges article[data-tier="gold"] svg,
.badges article[data-tier="platinum"] svg { color: #fff; }
.badges article[data-tier="silver"] svg { color: #fff; }
.badges article[data-tier="bronze"] svg { color: #fff; }
.badges article[data-tier="none"] svg { color: rgba(255, 255, 255, 0.7); }

/* Member page badges container */
#page-member .badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-base);
	padding: var(--space-3) 0;
	margin-top: var(--space-2);
	justify-content: center;
}

/* Action Buttons Row - 50% each */
#page-member .action-buttons-row {
	display: flex;
	gap: var(--space-2);
	width: 100%;
}

/* Action button base */
.btn-action-third {
	flex: 1;
	border-radius: var(--radius-md);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

/* Action button variants - only apply colors when in passed/liked state */
.btn-action-third.btn-pass.passed {
	background: var(--profile-pass-bg);
	border-color: var(--profile-pass-border);
	color: var(--profile-pass-text);
}

.btn-action-third.btn-like.liked {
	background: var(--profile-like-bg);
	border-color: var(--profile-like-border);
	color: var(--profile-like-text);
}

/* Action Buttons Row - 33% each (3-column layout) */
.btn-action-third {
	position: relative;
	gap: var(--space-1\.5);
	padding: var(--space-3) var(--space-2);
	font-size: var(--text-sm);
	border: 1px solid var(--border);
	background: var(--card-bg);
	color: var(--foreground);
	border-radius: var(--radius-full);
}

.btn-action-third.btn-pass .icon {
	font-size: var(--text-xl);
}

/* Smaller action buttons */
.btn-action {
	flex: 1;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
}

.btn-action svg {
	width: 18px;
	height: 18px;
}

.badge-large {
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--overlay-medium);
}

.badge-large svg {
	width: 32px;
	height: 32px;
}

.badge-large.badge-vip {
	background: transparent;
	border: none;
}

/* Circle icons - no background, color fills the circle */
.badge-large.badge-verified {
	background: transparent;
	color: var(--member-verified-bg);
}

.badge-large.badge-not-verified {
	background: transparent;
	color: var(--member-not-verified-bg);
}

.badge-large.badge-new {
	background: transparent;
	border: none;
}


/* Edit info note */
.edit-info-note {
	font-size: var(--text-sm);
	text-align: center;
	color: var(--muted);
	margin-bottom: var(--margin-base);
	padding: var(--space-2) var(--space-3);
	background: rgba(var(--warning-rgb), 0.1);
	border-radius: var(--radius-xs);
}



.btn-detect-location {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	width: fit-content;
}

.location-fields {
	display: flex;
	flex-direction: column;
	gap: var(--gap-base);
}

.location-field-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.location-field-group label {
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--muted);
}

.location-field-group .input-hint {
	font-size: var(--text-xs);
	color: var(--muted);
	font-style: italic;
	margin-left: var(--space-2);
}

.location-field-group .select-field {
	height: 2.5rem;
	padding-right: var(--space-10);
}

.location-field-group .select-field:disabled {
	background-color: var(--secondary);
	opacity: 0.7;
}

/* Photos count button - in right overlay stack */
.photos-count-overlay {
	background: var(--overlay-dark);
	color: white;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	font-weight: 500;
	border: none;
	cursor: pointer;
	transition: background 0.2s;
	margin-top: var(--space-2);
}

/* Like button - green only when liked */
.btn-like.liked {
	background: var(--profile-like-bg);
	border: 1px solid var(--profile-like-border);
	color: var(--profile-like-text);
}

/* Pass button - red only when passed */
.btn-pass.passed {
	background: var(--profile-pass-bg);
	border: 1px solid var(--profile-pass-border);
	color: var(--profile-pass-text);
}

/* Member photos grid - 2 columns on desktop */
.media-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap-base);
}

@media (min-width: 768px) {
	.media-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Member details - 5 columns on desktop, 2 on mobile */
#page-member .details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-base);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 992px) {
	#page-member .details {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Photo card - mobile: stacked, desktop: side by side */
.media-list article {
	background: var(--card-photos-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-bottom: var(--margin-base);
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.media-list figure {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	padding:0;
	margin:0;
	overflow: hidden;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.media-list article.primary {
	border-color: var(--primary);
}

.media-comments {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--space-4);
	min-height: 200px;
}

@media (min-width: 768px) {
	.media-list article {
		flex-direction: row;
		gap:var(--gap-base);
	}

	.media-list figure {
		width: 32%;
		flex-shrink: 0;
		border-right: 1px solid var(--border);
	}
	.media-comments {
		padding-left: 0;
	}

}

.comment-input-row {
	position: relative;
	gap: 0;
}

.comment-input-row input {
	font-size: var(--text-xs);
	padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
	width: 100%;
	border-radius: var(--radius-sm);
}


.photo-full {
	width: 100%;
	display: block;
	aspect-ratio: 4/5;
	object-fit: cover;
}

/* CSS blur fallback for legacy photos without server-side blur_url.
	 New photos use server-generated blurred thumbnails (more secure, can't be bypassed via dev tools). */
.photo-full.photo-blurred {
	filter: blur(20px);
}

/* Clickable photos (non-locked) - cursor hint */
.photo-full.photo-clickable {
	cursor: pointer;
}



/* Profile URL info - at bottom of profile section */
.url-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-4);
	margin-top: var(--space-4);
	text-align: center;
	font-size: var(--text-sm);
	color: var(--muted);
}

/* Verification prompt after photo upload */
#photo-upload .cta {
	margin-top: var(--space-6);
	padding: var(--space-5);
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(34, 197, 94, 0.1));
	border: 1px solid rgba(59, 130, 246, 0.3);
	border-radius: var(--card-radius);
}

/* Verified icon in page headers */
.header-verified-icon {
	color: var(--member-verified-bg);
	flex-shrink: 0;
}

.header-not-verified-icon {
	color: var(--member-not-verified-bg);
	flex-shrink: 0;
}

/* == Verified Badge == */

.verified-badge-wrapper {
	align-items: center;
	gap: 6px;
}

.verified-badge {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	cursor: pointer;
}

/* Verified - blue circle with white checkmark */
.verified-badge.filled {
	color: var(--member-verified-bg);
}

/* Not verified - orange circle with white X */
.verified-badge.hollow {
	color: var(--member-not-verified-bg);
	opacity: 1;
}

.verified-badge-sm {
	width: 14px;
	height: 14px;
}

.verified-badge-lg {
	width: 22px;
	height: 22px;
}

/* Verified label with why link */
.verified-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-sm);
}

.verified-label .verify-text {
	color: var(--muted);
	cursor: pointer;
}




/* ==================== Profile Questions ==================== */

/* Profile Questions - Edit Mode */

#edit-profile .questions {
	margin-top: var(--margin-base);
}

#edit-profile .questions h2 {
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: var(--space-2);
}

#edit-profile .questions .section-description {
	color: var(--muted);
	font-size: var(--text-sm);
	margin-bottom: var(--space-3);
}

dl.questions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-base);
	margin: 0;
}

dl.questions > div {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

dl.questions > div.unanswered {
	border-style: dashed;
	border-color: var(--muted);
}

dl.questions dt {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--muted);
}

dl.questions dd {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

dl.questions dd span {
	font-size: var(--text-sm);
	color: var(--foreground);
}

dl.questions > div:has(dd.editing) dt {
	margin-bottom: var(--space-1);
}

dl.questions dd.editing {
	width: 100%;
	flex-direction: column;
	align-items: stretch;
}

dl.questions .choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

dl.questions .choices label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background-color: var(--input-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: var(--text-sm);
	transition: background 0.15s, border-color 0.15s;
}

dl.questions .choices label:hover {
	background: var(--secondary);
	border-color: var(--primary);
}

dl.questions .choices input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--primary);
}

dl.questions .choices label:has(input:checked) {
	background: rgba(var(--primary-rgb), 0.1);
	border-color: var(--primary);
}

dl.questions select,
dl.questions input {
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--input-bg);
	color: var(--foreground);
	font-size: var(--text-sm);
}

dl.questions select {
	padding-right: var(--space-10);
	background-repeat: no-repeat !important;
	background-position: right var(--space-3) center !important;
}

@media (max-width: 640px) {
	dl.questions .choices {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	dl.questions {
		grid-template-columns: 1fr;
	}
}


/* ==================== PROFILE STYLES ==================== */

/**
 * Profile & Settings Page Styles
 *
 * Loaded on: /profile, /settings
 * Contains: profile editing, settings, appearance controls, discovery filters
 */


/* Settings field (readonly) */
#page-settings .field.readonly {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

#page-settings .field .field-value {
	font-size: var(--text-base);
	font-weight: 500;
	color: var(--foreground);
}

#page-settings .field .field-hint,
.form-group .field-hint {
	font-size: var(--text-xs);
	color: var(--muted);
}

/* Save button wrapper - centered with consistent spacing */
.save-button-wrapper {
	display: flex;
	justify-content: center;
	padding: var(--space-4) 0;
	margin-top: var(--space-2);
}

.save-button-wrapper .btn-primary {
	min-width: 120px;
}

/* Settings toggle list */
#page-settings .toggle-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: var(--space-5);
}

#page-settings .toggle-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}

#page-settings .toggle-item:last-child {
	border-bottom: none;
}


/* Stacked toggle item (for multi-option toggles) */
#page-settings .toggle-item-stacked {
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-2);
}
/* Settings page discovery filters */
#page-settings .discovery-filters {
	padding: 0;
}

#page-settings .discovery-filters .filter-item {
	padding: var(--space-4) 0;
	align-items: flex-start;
}


/* Settings links */
.links {
	display: flex;
	flex-direction: column;
}

.links A {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--padding-base);
	margin-bottom: var(--margin-base);
	color: var(--foreground);
	text-decoration: none;
	border: 1px solid var(--border);
    border-radius: var(--card-radius);
    background-color: var(--card-bg);
	transition: color 0.2s;

}

.settings-link A svg {
	color: var(--muted);
	flex-shrink: 0;
}




.details > div,
.details > li {
	display: flex;
	flex-direction: column;
	padding: var(--space-3);
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.details dt {
	color: var(--muted);
	font-size: var(--text-xs);
	margin-bottom: var(--space-1);
}

.details dd {
	font-weight: 500;
	font-size: var(--text-sm);
	margin: 0;
}

.toggle-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-0\.5);
}
.toggle-info H4 {
	font-weight: normal;
}

.toggle-info P {
	font-size: var(--text-sm);
	color: var(--muted);
}

/* Desktop: table-like layout for settings toggles */
@media (min-width: 768px) {
	.toggle-info {
		display: contents;
	}

	.toggle-info P {
		font-size: var(--text-sm);
	}
}

/* Message toggle (who can message me) */
.message-toggle {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	width: 100%;
}

.message-option {
	flex: 1 1 auto;
	min-width: 80px;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: 500;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background-color: var(--background-color);
	color: var(--muted);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.message-option:hover {
	border-color: var(--primary);
	color: var(--foreground);
}

.message-option.active {
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--primary-foreground);
}

@media (min-width: 480px) {
	.message-toggle {
		flex-wrap: nowrap;
	}
}


/* == Quick Message Popup == */

.quick-message-icebreakers {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border);
}

.icebreakers-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	flex: 1;
}

.icebreaker-btn {
	border: 1px solid var(--border);
	border-radius: 2rem;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	cursor: pointer;
}

.icebreaker-refresh {
	background: var(--accent);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	width: 32px;
	height: 32px;
	cursor: pointer;
	color: var(--muted);
	flex-shrink: 0;
	transition: all 0.15s ease;
}

/* Photo stats - like/comment buttons */
.media-comments header {
	display: flex;
	gap: var(--gap-base);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--border);
}

.photo-stat-btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--muted);
	font-size: var(--text-sm);
	padding: 0;
	transition: color 0.2s;
}

.photo-stat-btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.photo-stat-btn.liked {
	color: var(--error);
}

.photo-stat-btn svg {
	width: 20px;
	height: 20px;
}

/* Comments list */
.comments-list {
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
}

.comments-list UL {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comments-list UL LI {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-2);
	font-size: var(--text-base);
	line-height: var(--line-height-tight);
}

/* Owner action buttons */
.comment-deleted {
	opacity: 0.25;
	text-decoration: line-through;
}

.comment-deleted .comment-owner-actions {
	opacity: 1;
}

/* Flagged comment (reported, under review) — dim content but keep menu opaque */
.comment-flagged .comment-flagged-overlay,
.comment-flagged .comment-content {
	opacity: 0.6;
}

.comment-flagged-overlay {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 1;
	padding: var(--space-1) var(--space-2);
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: var(--radius-xs);
	font-size: var(--text-sm);
	color: var(--muted);
}

.comment-flagged-overlay .flag-icon {
	color: var(--error);
}

/* Ghost comment (deleted but visible to commenter) */
.comment-ghost {
	opacity: 0.5;
	font-style: italic;
}

.comment-ghost .comment-text::before {
	content: '[deleted] ';
	color: var(--muted);
}
.comment-ghost-badge {
	margin-left: var(--space-1);
}


.no-comments {
	color: var(--muted);
	font-style: italic;
	font-size: var(--text-sm);
}

.comment-content {
	margin:var(--space-1) 0;
	font-size: var(--text-sm);
}

.comment-author {
	font-weight: 600;
	margin-right: var(--space-4);
}

.comment-text {
	color: var(--muted);
}

.comment-time {
	color: var(--muted);
	opacity: 0.7;
	margin: 0 var(--space-2);
	margin-left: var(--space-2);
	padding-left: var(--space-2);
	border-left:1px solid var(--border);
	font-size: var(--text-xs);
}

.load-more-comments {
	color: var(--primary);
	font-size: var(--text-sm);
}

/* Comment input - send button inside input */
.comment-input-row {
	position: relative;
	display: flex;
	margin-top: auto;
}

.comment-input-row.disabled {
	opacity: 0.5;
}

.comment-input-row input {
	flex: 1;
	padding: var(--space-2) var(--space-10) var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background-color: var(--input-bg);
	color: var(--foreground);
	font-size: var(--text-sm);
}

.comment-input-row input:focus {
	outline: none;
	border-color: var(--primary);
}

.comment-input-row input:disabled {
	cursor: not-allowed;
}

.btn-send-comment {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	padding: 0;
	background: var(--primary);
	color: var(--button-text);
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: opacity 0.2s;
}

.btn-send-comment:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: transparent;
}

.btn-send-comment svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	color: inherit;
}


.comment-owner-actions {
	display: flex;
	gap: var(--space-1);
}

.btn-comment-action {
	background: none;
	border: none;
	padding: var(--space-1);
	cursor: pointer;
	color: var(--muted);
	border-radius: var(--radius-xs);
}

.btn-comment-action.active {
	color: var(--error);
}

.comment-menu-wrap {
	position: relative;
}

.btn-kebab {
	font-size: 1.25rem;
	line-height: 1;
	letter-spacing: 0.1em;
}

.comment-action-menu {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 50;
	background: var(--card-bg, var(--bg));
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,.15));
	padding: var(--space-1);
	min-width: 10rem;
	margin-top: var(--space-1);
}

.comment-reactions {
	display: flex;
	gap: 2px;
	padding: var(--space-1);
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--space-1);
}

.comment-reactions .reaction-option {
	background: none;
	border: none;
	font-size: 1.15rem;
	padding: var(--space-1);
	cursor: pointer;
	border-radius: var(--radius-xs);
	transition: transform 0.15s;
}

.comment-reactions .reaction-option:hover {
	transform: scale(1.25);
}

.comment-reactions .reaction-option.selected {
	background: var(--foreground);
}

.comment-menu-btn {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-2);
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--text-sm);
	color: var(--text);
	border-radius: var(--radius-xs);
}

.comment-menu-btn:hover {
	background: var(--hover-bg, rgba(128,128,128,.1));
}

.comment-reaction {
	margin-left: var(--space-1);
	font-size: 0.85rem;
}

.load-more-comments {
	font-size: var(--text-xs);
	margin: var(--space-2) 0;
}

/* Photo card action buttons overlay (profile page - delete, set as primary) */
.media-list article figcaption{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-6) 0 0 0;
	z-index:11;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}

.media-list article .btn-media {
	font-size: var(--text-sm);
	color: white;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: var(--space-2) var(--space-3);
	transition: background 0.2s, border-color 0.2s;
}

.media-list article .btn-media.delete {
	background: rgba(255, 0, 0, 0.2);
}

/* Photo card status styles */
.media-list article.pending figure {
	opacity: 0.8;
}

.media-list article.rejected figure {
	opacity: 0.6;
}

/* Locked photo overlay */
.photo-locked-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: var(--overlay-dark);
	backdrop-filter: blur(4px);
	text-align: center;
}

.unlock-text {
	color: white;
	font-size: var(--text-sm);
}

/* .btn-unlock-inline and .btn-upgrade-inline defined below in Member Photos section */

/* Big heart overlay in center - for like animation */
.photo-heart-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
}

.photo-heart-overlay svg {
	width: 120px;
	height: 120px;
	stroke: rgba(255, 255, 255, 0.8);
	stroke-width: 1;
	fill: none;
	transition: fill 0.3s, stroke 0.3s, opacity 0.3s, transform 0.3s;
}

.photo-heart-overlay.liked svg {
	fill: #ef4444;
	stroke: #ef4444;
}

/* Animation when liking */
.photo-heart-overlay.animating {
	opacity: 1;
	animation: heartPop 0.3s ease-out;
}

.photo-heart-overlay.animating svg {
	fill: #ef4444;
	stroke: #ef4444;
}

@keyframes heartPop {
	0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
	50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* After 3 seconds, animate to small badge */
.photo-heart-overlay.animating:not(.transitioning) {
	animation: heartPop 0.3s ease-out, heartShrink 0.5s ease-in 2.5s forwards;
}

@keyframes heartShrink {
	0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* Badge overlay - top right of hero photo */
.photo-overlay-badges {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	z-index: 2;
}

/* Pending approval overlay */
.photo-pending-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	z-index: 3;
}

.photo-pending-overlay .pending-label {
	font-weight: 600;
}

.photo-pending-overlay .pending-hint {
	font-size: var(--font-sm);
	opacity: 0.7;
}

/* Request photo overlay - for users without photos */
.photo-request-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	z-index: 3;
}

.photo-request-overlay .request-photo-title {
	font-weight: 600;
}

.photo-request-overlay .request-photo-subtitle {
	font-size: var(--font-sm);
	opacity: 0.7;
}

/* Knock button overlay - bottom center of hero photo */
.photo-knock-overlay {
	position: absolute;
	bottom: var(--space-3);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

/* Pending incoming knock overlay — covers the photo with accept/decline */
.knock-incoming-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	z-index: 3;
}

.knock-incoming-overlay .match-overlay {
	position: static;
	transform: none;
}

.knock-respond-actions {
	display: flex;
	gap: var(--space-3);
}

/* Locked photo overlay */
.photo-blur {
	width: 100%;
	aspect-ratio: 4/5;
	background: var(--secondary);
}

/* photo-locked-overlay styles defined in Member Photos section */

/* unlock-text styles defined in Member Photos section */

.btn-unlock-inline {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%);
	color: #1a1a1a;
	border: none;
	border-radius: var(--radius-2xl);
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
}

/* Removed hover scale - mobile-first */

.btn-unlock-inline svg {
	width: 36px;
	height: 36px;
	vertical-align: middle;
}

.btn-upgrade-inline {
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: linear-gradient(135deg, var(--vip-gold) 0%, var(--vip-gold-dark) 100%);
	color: #1a1a1a;
	border: none;
	border-radius: var(--radius-2xl);
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	margin-top: var(--space-2);
}

/* Member Sticky Header */
#page-member .sticky-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	gap: var(--gap-base);
	padding: var(--space-3) var(--space-4);
	background: var(--menu-bg);
	margin-bottom:var(--margin-base);
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#page-member .mobile .sticky-header {
	margin-bottom: 0;
}
#page-member .mobile .sticky-header .btn-back {
	padding: 0;
}
#page-member .mobile .sticky-header hgroup {
	gap:var(--space-1);
	color: var(--muted);
	align-items: baseline;
}
#page-member .mobile .name {
	font-size: var(--text-xl);
	margin: 0 var(--space-1);
}

#page-member .mobile .badge-verified {
	height:18px;
}
#page-member .mobile .section {
	border-radius: 0;
	padding: 0;
	margin-bottom: 0;
}
#page-member .mobile .details {
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
}
#page-member .mobile .details > div {
	margin:0;
	padding:var(--space-2) var(--space-4) var(--space-2) 0;
	border:none;
	background:none;
	border-radius: 0;
	border-bottom:1px dashed var(--border);
}


/* Passed Banner - shown when viewing a passed profile */
.passed-blocked-banner {
	gap: var(--gap-base);
	padding: var(--space-2) var(--space-4);
	background: var(--error-bg-subtle);
	color: var(--foreground);
	font-size: var(--text-sm);
	text-align: center;
	flex-wrap: wrap;
}

.passed-blocked-banner svg {
	flex-shrink: 0;
}

#page-member .sticky-header hgroup {
	gap: var(--space-2);
	flex: 1;
	text-align: center;
}

/* Member page actions menu overrides */
#page-member nav.actions {
	width: 40px;
	display: flex;
	justify-content: center;
}

#page-member nav.actions menu {
	min-width: 200px;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
	z-index: 110;
}

#page-member nav.actions menu button {
	white-space: nowrap;
}



/* Tagline - displayed at top of profile */
#page-member .tagline,
#page-member .quote {
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-md);
}

#page-member .quote .quote-title {
	font-size: var(--text-lg);
	font-weight: 500;
	margin: 0 0 0.5rem;
}

#page-member .quote .quote-description {
	font-size: var(--text-base);
	line-height: var(--line-height-normal);
}

/* Generic member section */
#page-member .section {
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-2);
}

#page-member .section h2 {
	font-size: var(--text-2xl);
	font-weight: 200;
	margin: var(--space-4) auto;
	padding: var(--space-2) 0;
	text-align: center;
	border-bottom: 1px dashed var(--border);
}

.photos-mutual-like-hint {
	padding: 0 var(--space-4);
	margin: var(--space-1) 0 var(--space-3);
	font-size: var(--text-sm);
	color: var(--muted);
	font-style: italic;
}




.interest-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-3);
	background: var(--accent);
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	color: var(--foreground);
}