/**
 * Bulledop Referral - Styles
 */

.bulledop-referral-card {
	padding: 1.5rem;
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.bulledop-referral-card h3 {
	margin-top: 0;
	margin-bottom: 1rem;
	color: #333;
}

.referral-code-display {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #fff;
	border: 2px dashed #0073aa;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.referral-code-label {
	font-size: 0.85rem;
	color: #666;
}

.referral-code-value {
	font-size: 1.3rem;
	font-weight: 700;
	color: #0073aa;
	letter-spacing: 0.05em;
	font-family: monospace;
}

.referral-actions {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.referral-stats {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.referral-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 80px;
}

.referral-stat .stat-number {
	font-size: 1.5rem;
	font-weight: 700;
	color: #0073aa;
}

.referral-stat .stat-label {
	font-size: 0.8rem;
	color: #888;
	text-align: center;
}

.referral-reward-msg {
	padding: 0.75rem 1rem;
	background: #e8f4fd;
	border: 1px solid #bee5eb;
	border-radius: 6px;
	color: #0c5460;
	font-size: 0.9rem;
	margin: 0;
}

.referral-reward-msg.referral-reward-success {
	background: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
	font-weight: 600;
}

@media (max-width: 600px) {
	.referral-code-display {
		flex-direction: column;
		text-align: center;
		gap: 0.5rem;
	}

	.referral-actions {
		flex-direction: column;
	}

	.referral-actions .bulledop-action-btn {
		width: 100%;
		text-align: center;
	}

	.referral-stats {
		justify-content: center;
	}
}