/**
 * Profile Friends Section Styles
 */

/* Friends Panels */
.msp-friends-panel {
	display: none;
}

.msp-friends-panel--active {
	display: block;
}

/* Friends Grid - 3 columns */
.msp-friends-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 992px) {
	.msp-friends-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

@media (max-width: 576px) {
	.msp-friends-grid {
		grid-template-columns: 1fr;
	}
}

/* Friend Card */
.msp-friend-card {
	background-color: #FFFFFF;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 20px;
}

/* Cover */
.msp-friend-card__cover {
	width: 100%;
	height: 100px;
	background: linear-gradient(135deg, #F8E8EE 0%, #E8D4DC 100%);
	overflow: hidden;
}

.msp-friend-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Avatar with Flag */
.msp-friend-card__avatar-wrap {
	position: relative;
	margin-top: -44px;
	z-index: 1;
}

.msp-friend-card__avatar {
	display: block;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid #FFFFFF;
	background-color: #DBDBDB;
}

.msp-friend-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msp-friend-card__avatar-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #DBDBDB;
}

.msp-friend-card__avatar-placeholder svg {
	width: 32px;
	height: 32px;
}

/* Flag */
.msp-friend-card__flag {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	background-size: cover;
	background-position: center;
}

/* Country flags - common ones */
.msp-flag--us { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23B22234'/%3E%3Crect y='2' width='24' height='2' fill='white'/%3E%3Crect y='6' width='24' height='2' fill='white'/%3E%3Crect y='10' width='24' height='2' fill='white'/%3E%3Crect y='14' width='24' height='2' fill='white'/%3E%3Crect y='18' width='24' height='2' fill='white'/%3E%3Crect y='22' width='24' height='2' fill='white'/%3E%3Crect width='10' height='10' fill='%233C3B6E'/%3E%3C/svg%3E"); }
.msp-flag--ca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Crect width='6' height='24' fill='%23FF0000'/%3E%3Crect x='18' width='6' height='24' fill='%23FF0000'/%3E%3Cpath d='M12 6l1 3h-2l1-3zm-2 4l-1 2h2l1-1-2-1zm4 0l1 2h-2l-1-1 2-1zm-2 3l-2 3h4l-2-3z' fill='%23FF0000'/%3E%3C/svg%3E"); }
.msp-flag--gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23012169'/%3E%3Cpath d='M0 0l24 24M24 0L0 24' stroke='white' stroke-width='4'/%3E%3Cpath d='M0 0l24 24M24 0L0 24' stroke='%23C8102E' stroke-width='2'/%3E%3Cpath d='M12 0v24M0 12h24' stroke='white' stroke-width='6'/%3E%3Cpath d='M12 0v24M0 12h24' stroke='%23C8102E' stroke-width='4'/%3E%3C/svg%3E"); }
.msp-flag--de { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FFCE00'/%3E%3Cpath d='M0 0h24v8H0z' fill='black'/%3E%3Cpath d='M0 8h24v8H0z' fill='%23DD0000'/%3E%3C/svg%3E"); }
.msp-flag--ru { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230039A6'/%3E%3Cpath d='M0 0h24v8H0z' fill='white'/%3E%3Cpath d='M0 16h24v8H0z' fill='%23D52B1E'/%3E%3C/svg%3E"); }

/* User Info */
.msp-friend-card__info {
	text-align: center;
	padding: 12px 16px 0;
}

.msp-friend-card__name {
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	color: var(--color-text);
	text-decoration: none;
	display: block;
}

.msp-friend-card__name:hover {
	color: var(--color-primary-dark);
}

.msp-friend-card__location {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 16px;
	color: var(--color-text-muted);
	margin-top: 4px;
}

/* Stats */
.msp-friend-card__stats {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	padding: 16px 16px 0;
}

.msp-friend-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.msp-friend-info__circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1.5px solid var(--color-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 16px;
	color: var(--color-text-secondary);
}

.msp-friend-info__circle--age {
	border-color: var(--color-text-muted);
}

.msp-friend-info__circle--kids {
	border-color: #DC0E63;
	color: #DC0E63;
}

.msp-friend-info__circle--pregnant {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.msp-friend-info__circle--not-pregnant {
	border-color: var(--color-text-muted);
	color: var(--color-text-muted);
}

.msp-friend-info__circle--planning-pregnant {
	border-color: #DC0E63;
	color: #DC0E63;
}

.msp-friend-info__value {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 16px;
}

.msp-friend-info__label {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 16px;
	color: var(--color-text-muted);
	text-align: center;
	white-space: nowrap;
}

/* Actions */
.msp-friend-card__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 16px 0;
	width: 100%;
}

.msp-friend-card__actions .msp-btn--sm {
	min-width: 100px;
	padding: 8px 16px;
	font-size: 14px;
	line-height: 16px;
}

.msp-friend-card__actions .msp-btn--outline {
	background-color: transparent;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
}

.msp-friend-card__actions .msp-btn--outline:hover {
	background-color: var(--color-accent);
	color: #FFFFFF;
}

.msp-friend-card__status {
	font-family: var(--font-primary);
	font-size: 14px;
	line-height: 16px;
	color: var(--color-text-muted);
	padding: 8px 16px;
}

.msp-friend-card__status--pending {
	color: #F39C12;
}

/* Badge for requests count */
.msp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}

.msp-badge--notification {
	background-color: #DC0E63;
	color: #FFFFFF;
	margin-left: 6px;
}